標籤：android 圖片 media 文章 device-width
如題，這種方式做的移動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的。
如果布局、字型都沒什麼問題，縮放也不是很有必要了。
本文出自 “沒有水勒魚” 部落格，請務必保留此出處http://javaqun.blog.51cto.com/10687700/1725574
移動Web頁面，為什麼都喜歡width=device-width，並且關閉系統縮放功能？
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
