日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

為移動(dòng)設(shè)備制作前端頁(yè)面，往往會(huì)遇到很多令人迷惑的情況，本文中，我整理了一些相關(guān)的概念和方法，與大家分享一下。

為濟(jì)陽(yáng)等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及濟(jì)陽(yáng)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、網(wǎng)站建設(shè)、濟(jì)陽(yáng)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

設(shè)備像素和CSS像素

css像素是固定不變的，瀏覽器上縮放的話，css像素會(huì)被拉伸或者縮小，設(shè)備像素不變

100%zoom ： css像素 和設(shè)備像素 一致

zoom被縮放 ： css像素在設(shè)備像素里 被縮放

屏幕尺寸和窗口尺寸

屏幕尺寸和窗口尺寸較好理解

但是需要注意的是：當(dāng)縮放窗口的時(shí)候，窗口尺寸更改了，這一點(diǎn)對(duì)于后面理解移動(dòng)端尺寸有一定幫助

解釋：當(dāng)放大頁(yè)面的時(shí)候，窗口尺寸變小了，為什么呢？因?yàn)榇翱诔叽?window.innerWidth)的定義是窗口里能展現(xiàn)的像素寬高，頁(yè)面放大了，頁(yè)面里展現(xiàn)的css像素變少了，所以窗口尺寸變小了，相反縮小頁(yè)面的時(shí)候，窗口尺寸變大了。

pc上的viewport

viewport并非是移動(dòng)端的專利，viewport是瀏覽器內(nèi)部的一個(gè)數(shù)據(jù)，它約束html的寬度。viewport基本等同于窗口尺寸，所以當(dāng)你縮放窗口的時(shí)候viewport會(huì)改變，相應(yīng)的html寬度也會(huì)改變。

這個(gè)例子中，由于放大頁(yè)面，viewport變小，而頁(yè)面中的頭部藍(lán)條css設(shè)置為100%，跟隨viewport變化，所以右側(cè)logo暴露了出來(lái)，藍(lán)條沒(méi)有覆蓋100%的文檔寬度，而只取viewport的寬度。

移動(dòng)終端的viewport

移動(dòng)終端的viewport更加麻煩一些，有兩種viewport，分別是展示viewport(visual viewport)和布局viewport(layout viewport)。

上面這張圖片你可以這么理解：

手機(jī)是一個(gè)放大鏡，它游走在頁(yè)面上，手機(jī)上展示的寬高為visual-viewport,而整個(gè)頁(yè)面的寬高是layout-viewport。

好奇的朋友一定會(huì)問(wèn)，為什么要這樣呢，何必這么麻煩？這是因?yàn)槭謾C(jī)的尺寸太小了，“移動(dòng)瀏覽器廠商想給它們的客戶盡可能的提供***的體驗(yàn)，這現(xiàn)在指的就是「盡可能的跟桌面一樣」。因此耍一些花招是必要的?！?/em>

那么，假如我的頁(yè)面沒(méi)有經(jīng)過(guò)任何優(yōu)化，手機(jī)默認(rèn)的layout-viewport是多大呢，“l(fā)ayout viewport有多寬？每個(gè)瀏覽器都不一樣。Safari iPhone為980px，Opera為850px，Android WebKit為800px，***IE為974px。”

這就是為什么普通一個(gè)頁(yè)面在iphone上看會(huì)變得很大的原因，iphone默認(rèn)把你的頁(yè)面的viewport設(shè)置為980px，也就是說(shuō)html的100%寬度默認(rèn)為980px;

#p#

現(xiàn)代移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)與viewport

雖說(shuō)visual-viewport是為了用戶看得更清楚而做的設(shè)定，但實(shí)際上，這帶來(lái)了用戶體驗(yàn)上的下降，用戶往往需要縮放和移動(dòng)頁(yè)面。所以現(xiàn)代針對(duì)移動(dòng)端的網(wǎng)頁(yè)設(shè)計(jì)（或者響應(yīng)式設(shè)計(jì)）通常采用的方法是，精簡(jiǎn)頁(yè)面內(nèi)容，放大視覺(jué)元素，避免體驗(yàn)不好的縮放和移動(dòng)頁(yè)面。包括boostrap在內(nèi)的眾多前端框架也無(wú)不在設(shè)計(jì)上采用這種解決方案。

要滿足這種設(shè)計(jì)，首先要保證一件事情就是，讓layout-viewport就是visual-viewport，消除兩個(gè)viewport帶來(lái)的頁(yè)面差異。

蘋(píng)果公司推動(dòng)的的viewport meta可以解決這個(gè)問(wèn)題，viewport的主要作用是指定layout-viewport的大小。

比如：

這個(gè)設(shè)定其實(shí)就是讓layout-viewport和visual-viewport保持一致，回想一下上面那張把手機(jī)當(dāng)做放大鏡的圖片，有了這個(gè)設(shè)定以后，手機(jī)就不是放大鏡了，而是把整個(gè)頁(yè)面裝在手機(jī)里。

此外，viewport還可以設(shè)置 initial-scale , user-scalable

蘋(píng)果給的一些例子

關(guān)于Viewport，safari的開(kāi)發(fā)官網(wǎng)給了一些例子，可以加深我們對(duì)這個(gè)問(wèn)題的理解：

可以看到?jīng)Q定頁(yè)面展示效果的兩個(gè)因素，width和scale，scale類似pc端的放大縮小

一個(gè)默認(rèn)寬度為100%頁(yè)面的樣子

默認(rèn)寬度 + initial scale = 1.0

寬度設(shè)為320 + 默認(rèn) initial scale

參考：

一、http://weizhifeng.net/viewports.html

二、http://weizhifeng.net/viewports2.html

三、https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

原文地址：http://blog.segmentfault.com/fishenal/1190000000495454