整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
phone&Ipad&Android&WEB
全部規(guī)范全在這兒了！！
火速收藏~
1iPhone的設(shè)計(jì)尺寸
2iPad的設(shè)計(jì)尺寸
3Android的設(shè)計(jì)尺寸
屏幕尺寸
指實(shí)際的物理尺寸，為屏幕對角線的測量。
為了簡單起見，Android把實(shí)際屏幕尺寸分為四個(gè)廣義的大小：小，正常，大，特大。
像素（PX）
代表屏幕上一個(gè)物理的像素點(diǎn)代表屏幕上一個(gè)物理的像素點(diǎn)。
屏幕密度
為解決Android設(shè)備碎片化，引入一個(gè)概念DP，也就是密度。指在一定尺寸的物理屏幕上顯示像素的數(shù)量，通常指分辨率。 為了簡單起見，Android把屏幕密度分為了四個(gè)廣義的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi） 像素=DP * （ DPI / 160 ) 例如，在一個(gè)240dpi的屏幕里，1DP等于1.5PX。
于設(shè)計(jì)來說，選取一個(gè)合適的尺寸作為正常大小和中等屏幕密度（尺寸的選取依據(jù)打算適配的硬件，建議參考現(xiàn)主流硬件分辨率），然后向下和向上 做小、大、特大和低、高、超高的尺寸與密度。
典型的設(shè)計(jì)尺寸
? 320dp：一個(gè)普通的手機(jī)屏幕（240X320，320×480，480X800）
? 480dp：一個(gè)中間平板電腦像（480×800）
? 600dp：7寸平板電腦（600x1024）
? 720dp：10寸平板電腦（720x1280，800x1280）
3Web的設(shè)計(jì)尺寸
Windows XP任務(wù)欄的高度30px Windows 7任務(wù)欄的高度40px
系統(tǒng)分辨率統(tǒng)計(jì)
安全分辨率為1024 × 768 px 可建議大分辨率為1280 × 800 px
綜合分辨率及瀏覽器下的統(tǒng)計(jì)數(shù)據(jù)
網(wǎng)頁寬度與首屏高度
安全寬度1002 px 可建議較大寬度1258 px
Window XP首屏大小580 px Window 7 首屏大小710 px
文章最后，推薦兩個(gè)最具價(jià)值的微信號！！
網(wǎng)站分析公會 （微信號：idiaa-org）
超過50萬名互聯(lián)網(wǎng)從業(yè)人士關(guān)注，互聯(lián)網(wǎng)運(yùn)營領(lǐng)域最具影響力自媒體。我們精心挑選互聯(lián)網(wǎng)運(yùn)營分析，產(chǎn)品戰(zhàn)略，數(shù)據(jù)解讀，設(shè)計(jì)案例等內(nèi)容，幫助互聯(lián)網(wǎng)從業(yè)者及時(shí)獲得專業(yè)資訊！
長按指紋→識別圖中二維碼→添加關(guān)注
用同等比例的圖片在PC機(jī)上很清楚，但是手機(jī)上很模糊，原因是什么呢？
經(jīng)過研究，是devicePixelRatio作怪，因?yàn)槭謾C(jī)分辨率太小，如果按照分辨率來顯示網(wǎng)頁，這樣字會非常小，所以蘋果當(dāng)初就把iPhone 4的960640分辨率，在網(wǎng)頁里只顯示了480320，這樣devicePixelRatio＝2。現(xiàn)在android比較亂，有1.5的，有2的也有3的。
想讓圖片在手機(jī)里顯示更為清晰，必須使用2x的背景圖來代替img標(biāo)簽（一般情況都是用2倍）。例如一個(gè)div的寬高是100100，背景圖必須得200200，然后background-size:contain;，這樣顯示出來的圖片就比較清晰了。
代碼可以如下：
background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 或者指定 background-size:contain;都可以，大家試試！
若您遇到圖片加載很慢的問題，對這種情況，手機(jī)開發(fā)一般用canvas方法加載：
具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html
下面舉例說明一個(gè)canvas的例子：
<li><canvas></canvas></li> s動(dòng)態(tài)加載圖片和li 總共舉例17張圖片！
var total=17; var zWin=$(window); var render=function(){
var padding=2;
var winWidth=zWin.width();
var picWidth=Math.floor((winWidth-padding*3)/4);
var tmpl='''''''';
for (var i=1;i<=totla;i++){
var p=padding;
var imgSrc=''''img/''''+i+''''.jpg'''';
if(i%4==1){
p=0;
}
tmpl +=''''<li style="width:''''+picWidth+''''px;height:''''+picWidth+''''px;padding-left:''''+p+''''px;padding-top:''''+padding+''''px;"><canvas id="cvs_''''+i+''''"></canvas></li>'''';
var imageObj=new Image();
imageObj.index=i;
imageObj.onload=function(){
var cvs=$(''''#cvs_''''+this.index)[0].getContext(''''2d'''');
cvs.width=this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
} } render(); 看了一下zeptio新版的API，已經(jīng)支持IE10以上瀏覽器，對zeptojs可以選擇使用！
還有就是，有些手機(jī)網(wǎng)站我們看到如下聲明：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">設(shè)置了DTD的方式是XHTML的寫法，假如我們頁面運(yùn)用的是html5，可以不用設(shè)置DTD,直接聲明<!DOCTYPE html>。
使用viewport使頁面禁止縮放。 通常把user-scalable設(shè)置為0來關(guān)閉用戶對頁面視圖縮放的行為。
<meta name="viewport" content="user-scalable=0" />但是為了更好的兼容，我們會使用完整的viewport設(shè)置。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />當(dāng)然，user-scalable=0,有的人也寫成user-scalable=no，都可以的。
apple-mobile-web-app-capable是設(shè)置Web應(yīng)用是否以全屏模式運(yùn)行。
語法：
<meta name="apple-mobile-web-app-capable" content="yes">說明：
如果content設(shè)置為yes，Web應(yīng)用會以全屏模式運(yùn)行，反之，則不會。content的默認(rèn)值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網(wǎng)頁是否以全屏模式顯示。
兼容性：
iOS 2.1 +
format-detection 啟動(dòng)或禁用自動(dòng)識別頁面中的電話號碼。
語法：
<meta name="format-detection" content="telephone=no">說明：
默認(rèn)情況下，設(shè)備會自動(dòng)識別任何可能是電話號碼的字符串。設(shè)置telephone=no可以禁用這項(xiàng)功能。
兼容性
iOS 1.0 +
html5提供了自動(dòng)調(diào)用撥號的標(biāo)簽，只要在a標(biāo)簽的href中添加tel:就可以了。
如下：
<a href="tel:4008106999,1034">400-810-6999 轉(zhuǎn) 1034</a>撥打手機(jī)直接如下
<a href="tel:15677776767">點(diǎn)擊撥打15677776767</a>具體請看：http://www.sj520.cn/listdetail/1/8227/2290.html（HTML5中GPS定位之getCurrentPosition）
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling
Element { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; }解決移動(dòng)設(shè)備可選中頁面文本(視產(chǎn)品需要而定)
element { -webkit-touch-callout: none; }Element{ -webkit-appearance: none; }Element { -webkit-tap-highlight-color:rgba(255,255,255,0) }設(shè)置alpha值為0就可以去除半透明灰色遮罩，備注：transparent的屬性值在android下無效。
后面一篇文章有詳細(xì)介紹，手機(jī)網(wǎng)站點(diǎn)擊鏈接觸發(fā)顏色塊的問題解決:地址：http://www.sj520.cn/listdetail/1/8227/2291.html
方法一：body添加ontouchstart
<body ontouchstart="">方法二：js給 document 綁定 touchstart 或 touchend 事件
<style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >bar</a> <script> document.addEventListener(''''touchstart'''',function(){},false); </script>Element { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0); }注意：3D變形會消耗更多的內(nèi)存與功耗
Element{ border-width: thin; }某些低端手機(jī)不支持css3 mask，可以選擇性的降級處理。
比如可以使用js判斷來引用不同class：
if( ''''WebkitMask'''' in document.documentElement.style){ alert(''''支持mask''''); } else { alert(''''不支持mask''''); }html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }/設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留3D /
-webkit-transform-style: preserve-3d;/ 設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時(shí)是否可見：隱藏 /
-webkit-backface-visibility:hidden;某些Android手機(jī)圓角失效
background-clip: padding-box;<meta name="apple-mobile-web-app-status-bar-style" content="black" />說明：
除非你先使用apple-mobile-web-app-capable指定全屏模式，否則這個(gè)meta標(biāo)簽不會起任何作用。
如果content設(shè)置為default，則狀態(tài)欄正常顯示。如果設(shè)置為blank，則狀態(tài)欄會有一個(gè)黑色的背景。如果設(shè)置為blank-translucent，則狀態(tài)欄顯示為黑色半透明。如果設(shè)置為default或blank，則頁面顯示在狀態(tài)欄的下方，即狀態(tài)欄占據(jù)上方部分，頁面占據(jù)下方部分，二者沒有遮擋對方或被遮擋。如果設(shè)置為blank-translucent，則頁面會充滿屏幕，其中頁面頂部會被狀態(tài)欄遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕為40px）。默認(rèn)值是default。
兼容性 iOS 2.1 +
<meta http-equiv="Cache-Control" content="no-cache" />手機(jī)頁面通常在第一次加載后會進(jìn)行緩存，然后每次刷新會使用緩存而不是去重新向服務(wù)器發(fā)送請求。如果不希望使用緩存可以設(shè)置no-cache。
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />iOS下針對不同設(shè)備定義不同的桌面圖標(biāo)。如果不定義則以當(dāng)前屏幕截圖作為圖標(biāo)。
上面的寫法可能大家會覺得會有默認(rèn)光澤，下面這種設(shè)置方法可以去掉光澤效果，還原設(shè)計(jì)圖的效果！
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />圖片尺寸可以設(shè)定為5757（px）或者Retina可以定為114114（px），ipad尺寸為72*72（px)
<link rel="apple-touch-startup-image" href="start.png"/>iOS下頁面啟動(dòng)加載時(shí)顯示的畫面圖片，避免加載時(shí)的白屏。
可以通過madia來指定不同的大小：
<!--iPhone--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> <!-- iPhone Retina --> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPhone 5 --> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png"> <!-- iPad portrait --> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /> <!-- iPad landscape --> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /> <!-- iPad Retina portrait --> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPad Retina landscape --> <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />以下屬性在項(xiàng)目中沒有應(yīng)用過，可以寫一個(gè)demo測試以下！
QQ瀏覽器私有
全屏模式
<meta name="x5-fullscreen" content="true">強(qiáng)制豎屏
<meta name="x5-orientation" content="portrait">強(qiáng)制橫屏
<meta name="x5-orientation" content="landscape">應(yīng)用模式
<meta name="x5-page-mode" content="app">UC瀏覽器私有
全屏模式
<meta name="full-screen" content="yes">強(qiáng)制豎屏
<meta name="screen-orientation" content="portrait">強(qiáng)制橫屏
<meta name="screen-orientation" content="landscape">應(yīng)用模式
<meta name="browsermode" content="application">其它
針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓
<meta name="HandheldFriendly" content="true">微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">windows phone 點(diǎn)擊無高光
<meta name="msapplication-tap-highlight" content="no">問題是這樣的，用input search做模糊搜索的時(shí)候，在鍵盤里面輸入關(guān)鍵詞，會通過ajax后臺查詢，然后返回?cái)?shù)據(jù)，然后再對返回的數(shù)據(jù)進(jìn)行關(guān)鍵詞標(biāo)紅。用input監(jiān)聽鍵盤keyup事件，在安卓手機(jī)瀏覽器中是可以的，但是在ios手機(jī)瀏覽器中變紅很慢，用輸入法輸入之后，并未立刻相應(yīng)keyup事件，只有在通過刪除之后才能相應(yīng)！
解決辦法：
可以用html5的oninput事件去代替keyup
<input type="text" id="testInput"> <script type="text/javascript"> document.getElementById(''''testInput'''').addEventListener(''''input'''', function(e){ var value=e.target.value; }); </script>然后就達(dá)到類似keyup的效果！
段時(shí)間已經(jīng)策劃了5-6個(gè)頭條頁面，目前來看每個(gè)頁面的數(shù)據(jù)轉(zhuǎn)化能力都還不錯(cuò)，當(dāng)然也還有很大的提升空間，后續(xù)還可以繼續(xù)優(yōu)化。上兩篇已
經(jīng)介紹了頭條頁面策劃的一些核心內(nèi)容。
做推廣的少不了需要了解移動(dòng)端頁面設(shè)計(jì)的相關(guān)的尺寸問題，今天總結(jié)下其中的經(jīng)驗(yàn)，讓自己好好回顧下。
目前是市面上的移動(dòng)端設(shè)備屏幕尺寸很多。尤其是Android，我們會碰到到多種分辨率：1080x1920，720x1280,540x960,480x854,480x800,現(xiàn)在還
有傳說中的2K屏。近年來iPhone的分辨率也加劇了：1242x2208，750x1334, 640x1136,640x960等。
面對這么多的屏幕尺寸我們不要被嚇倒。因?yàn)榇蟛糠值腶pp和移動(dòng)端網(wǎng)頁，在各種尺寸的屏幕上都能正常顯示。今天主要來說說頁面尺寸
設(shè)計(jì)的技巧。
在設(shè)計(jì)頁面時(shí)，先擬定頁面的寬度，目前經(jīng)過5-6個(gè)頁面的實(shí)戰(zhàn)測試，我們大概摸清了頭條頁面的寬度實(shí)際需求，目前針對iPhone和Android手機(jī)的
用戶我們使用的寬度是640xp的，這個(gè)尺寸比較適中，頁面的文字和圖片不會出現(xiàn)變形的情況。
針對頁面高度這塊，我一向秉持的高度不限，不過屏數(shù)需要控制，目前頭條這塊的頁面控制在6-8屏是最合適的，越長的頁面轉(zhuǎn)化越低，原因很簡
單違背人性的東西都沒有好下場，人是懶惰的。
另外一點(diǎn)是，頁面設(shè)計(jì)完后，需要切圖，目前所采取的措施整圖切，簡單的理解就是不按屏來算，為了保證圖片的完整性，我們切圖是一般選擇從
圖的上部到底部來切，切好后及時(shí)圖片的高度有時(shí)高于手機(jī)屏幕的高度也沒有關(guān)系，因?yàn)檫@樣反而能告訴我們的目標(biāo)用戶下面還有內(nèi)容。
頭條后端設(shè)置比較靈活，可以自由添加圖片，而且在寬度不變的情況下，高度不做限制，這樣非常有利于后臺管理者自己運(yùn)營和上傳更新后的網(wǎng)站
。
總結(jié)下：目前這塊的頁面寬度保持在640XP就可以正常瀏覽了，高度不做限制，不過屏數(shù)需要控制在6-8屏。
以上觀點(diǎn)僅代表個(gè)人鄙見，信息僅供參考，同時(shí)也希望對各位朋友有幫助，本文版權(quán)歸作者所有，歡迎轉(zhuǎn)摘，轉(zhuǎn)摘請注明作者和出處！
作者：南衛(wèi)四道
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
