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