溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如題，這種方式做的移動Web頁面，設計稿通常是按照960*640的規格進行設計，再開發的時候，通常會把里面量到的尺寸縮小一半再開發。
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
那既然要縮小一半再開發，為什么不直接設置width=640，然后按照設計稿的尺寸進行開發呢？
對于第一種方法，我暫時能想到好處之后圖片縮小了一半，不知道還有什么其他原因促使大家去用width=device-width
這涉及到了移動設備（ios, android）的屏幕尺寸問題，device-width指的是設備的物理寬度，width是頁面寬度，這么做是為了兼容更多的設備，當然只通過viewport標簽還是不夠的，還需要配合Media Query進行響應式設計。
這兒有兩篇之前翻譯的關于viewport的文章，希望有幫助：
http://weizhifeng.net/viewports.html
http://weizhifeng.net/viewports2.html
在網頁的<head>中增加這句話，可以讓網頁的寬度自動適應手機屏幕的寬度。 其中： width=device-width ：表示寬度是設備屏幕的寬度 initial-scale=1.0：表示初始的縮放比例 minimum-scale=0.5：表示最小的縮放比例 maximum-scale=2.0：表示最大的縮放比例 user-scalable=yes：表示用戶是否可以調整縮放比例
手機的屏幕肯定有各種分辨率如果單純固定死640的話，你就看不到其他手機分辨率的效果了
自適應網頁設計參考 http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
視網膜屏幕的分辨率比如 960*640 , 并非所有屏幕都是視網膜屏幕, 比如iPhone3GS的分辨率就是480*320
為了讓頁面在兩者都可以正常顯示,所以視網膜屏幕主機的瀏覽器會做一些 "特殊的動作"(比如如果你什么也不做,就只是設個寬度,你會發現結果出乎你意料,建議你在iPhone4S試一下,它的分辨率剛好是960*640,但是你不加Meta畫一個96*640的div試試) .
真正的原因是一份標簽適應960*640和480*320以及其他(比如電腦,有時候會用電腦或iPad瀏覽手機網頁)
你可以在頁面里寫一個js計算瀏覽器渲染的寬度，你會發現iphone瀏覽器認為自己的寬度只有320px
加width=device-width，字體大小才會適合閱讀。你用手機訪問一些網站的時候，看到的頁面和電腦上一樣，字體非常小,需要縮放才能看清，這種就是沒加width=device-width的。
如果布局、字體都沒什么問題，縮放也不是很有必要了。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
