移動web設計稿尺寸，關於移動web尺寸的那點事

標籤：

我自己的做稿子的時候，一開始就有一個習慣，先放上這段代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    未隱藏URL欄
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />   已隱藏URL欄
1：1顯示（initial-scale=1.0, maximum-scale=1.0），

禁止放大縮小（user-scalable=no）
隱藏IOS系統瀏覽器的URL欄目與狀態列目（minimal-ui，只有IOS7版本支援哦）


現在就是1：1顯示啦，

移動wep肯定是用HTML5啦！！不用說的

然後就
alert(‘width:‘ + window.innerWidth + ‘;height:‘ + window.innerHeight);
這樣就能可視地區1：1的尺寸啦！！
這樣就得到機子可視地區尺寸啦！！然後直接就可以在PS或AI裡面做稿嘍，
記得是72解析度哦，

還有一點特別注意，就是圖片的問題，一定要加1倍的寬和高才能讓圖片特別清晰哦，優其是LOGO，這個~~你懂的~~~~~


目前我知道的移動端可視區尺寸

iPhone4/iPhone4s   320 * 372 / 320 * 441 (已隱藏URL與狀態列)

iPhone5/iPhone5s   320 * 460 / 320 * 529 (已隱藏URL與狀態列)

Note2  360 * 567   (未隱藏URL與狀態列)

iPad 3/4   768*928   (未隱藏URL與狀態列)

GALAXY SIII 360 * 567   (未隱藏URL與狀態列)

小米2A 360 *567  (未隱藏URL與狀態列)
HTC G10 320 * 460


以上是我目前知道的，還有特別多，大家有空多列印出來，再分享出來啦，人多力量大，用的機子也不同


聽說
window.onload = function(){
        setTimeout(scrollTo,0,0,0);
}
可以隱藏android和IOS系統的URL，但我一直試都不行，是我弄錯了，還是機子問題，還是TM的不給力。

移動web設計稿尺寸，關於移動web尺寸的那點事