什么是html5viewport-創(chuàng)新互聯(lián)

什么是html5 viewport？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

目前創(chuàng)新互聯(lián)已為超過(guò)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、山陽(yáng)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

總結(jié)下來(lái)無(wú)非圍繞三個(gè)問(wèn)題:
1、為什么要設(shè)置虛擬窗口
起初是為了使得虛擬窗口的分辨率和pc端接近，這樣虛擬窗口依然能夠完整顯示 頁(yè)面內(nèi)容，只是頁(yè)面內(nèi)容比較小，需要通過(guò)手動(dòng)縮放的方式來(lái)看清楚頁(yè)面。
2、添加viewport有什么用
添加viewport是為了方便移動(dòng)端的優(yōu)化。設(shè)置虛擬窗口寬度為device-width，與設(shè)備的物理像素相同，這樣我們就可以通過(guò)media來(lái)控制頁(yè)面移動(dòng)界面的顯示方式。
3、設(shè)備屏幕寬度(即設(shè)備的物理像素)與分辨率的關(guān)系
以iphone6為例，其屏幕實(shí)際大小為375*667，然而其分辨率達(dá)到750*1334,這兩者是不同的概念。
   物理尺寸是指屏幕的實(shí)際大小。大的屏幕同時(shí)必須要配備高分辨率，也就是在這個(gè)尺寸下可以顯示多少個(gè)像素，顯示的像素越多，可以表現(xiàn)的余地自然越大。兩臺(tái)手機(jī)的屏幕大小差不多大，卻一個(gè)只能顯示兩行漢字，另一個(gè)則可以顯示五行漢字，拋開(kāi)字體大小差別，關(guān)鍵就是屏幕的分辨率，后者分辨率大一些，自然在同樣字體大小下可以顯示更多行的漢字。彩屏手機(jī)的確好，沒(méi)有足夠大分辨率的屏幕表現(xiàn)，再高的顏色質(zhì)量又有何用。

---

下面我們來(lái)解釋一下viewport的作用和它怎樣與media結(jié)合。
   一個(gè)50像素寬的p在pc瀏覽器顯示可能剛好，但是如果在手機(jī)瀏覽器顯示就會(huì)顯得過(guò)大。怎么解決這個(gè)問(wèn)題呢？Apple找到了一個(gè)辦法：在移動(dòng)版(iOS)的Safari中定義了viewport meta標(biāo)簽，它的作用就是創(chuàng)建一個(gè)虛擬的窗口(viewport)，而且這個(gè)虛擬窗口的分辨率接近于桌面顯示器，Apple將其定位為980px。也就是當(dāng)我用瀏覽器中打開(kāi)任意的一個(gè)頁(yè)面，這個(gè)頁(yè)面的寬度為980px，而不是屏幕的物理寬度。
   以一代iphone6下的Safari來(lái)說(shuō)就是：
在iphone6的375px物理屏幕上——視覺(jué)窗口(visual viewport)，創(chuàng)建出了一個(gè)980px的虛擬窗口——布局窗口(layout viewport)，在視覺(jué)窗口(visual viewport)中我們可以拖動(dòng)橫向豎向滑動(dòng)條或者放大縮小網(wǎng)頁(yè)，來(lái)達(dá)到最佳的瀏覽效果(類(lèi)似桌面瀏覽器)；而布局窗口(layout viewport)用來(lái)配合CSS渲染布局，例如當(dāng)我們?cè)O(shè)置一個(gè)容器的寬度為100%時(shí)，這個(gè)容器的實(shí)際值為980px而不是375px。如此一來(lái)大部分 網(wǎng)頁(yè)就能以縮放的形式正常的顯示在手機(jī)屏幕上了。

虛擬窗口980px在屏幕上的實(shí)際尺寸是多大?
        iphone6屏幕的物理像素是375px，虛擬窗口的寬度是980px，這兩者的1px大小是不想等，說(shuō)得更簡(jiǎn)單一點(diǎn)就是此px非彼px，一個(gè)是用來(lái)形容實(shí)際窗口即視覺(jué)窗口的大小，一個(gè)是用來(lái)形容虛擬窗口的大小，沒(méi)什么相關(guān)的。(可以通過(guò)chromn來(lái)檢查頁(yè)面在pc瀏覽器和手機(jī)瀏覽器的寬度。)

• safari瀏覽器、opera瀏覽器、chromn瀏覽器 虛擬窗口大小默認(rèn)都是980px，火狐瀏覽器默認(rèn)開(kāi)啟手機(jī)模式，其虛擬窗口寬度就是設(shè)備寬度。

  智能手機(jī)創(chuàng)建出虛擬窗口后，又出現(xiàn)一個(gè)問(wèn)題，pc端網(wǎng)頁(yè)在手機(jī)瀏覽器打開(kāi)后無(wú)論是字體還是其它元素都顯得比較小，看起來(lái)比較吃力，動(dòng)手縮放又顯得比較麻煩。apple又弄出個(gè)viewport用來(lái)調(diào)整虛擬窗口的大小，一般我們會(huì)這樣寫(xiě)

<meta name="viewport" content="width =device-width,initial-scale=1,user-scalable=1">

device-width表示設(shè)置虛擬窗口的大小同設(shè)備的物理像素寬度相等。這樣方便我們使用media寫(xiě)一個(gè)專(zhuān)門(mén)適配移動(dòng)端的頁(yè)面，這樣我們就可以在移動(dòng)端看到合適大小的頁(yè)面。

關(guān)于什么是html5 viewport問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱(chēng)欄目：什么是html5viewport-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article38/ddopsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)