溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Viewport在開發(fā)手機Web中的應用

發(fā)布時間:2020-06-07 15:38:58 來源:網(wǎng)絡 閱讀:207 作者:天蝎座小伙 欄目:移動開發(fā)

目前比較主流的移動設備系統(tǒng)包括 Android,IOS ,Symbian,BlackBerry 與Web OS。這些系統(tǒng)瀏覽器都是基于webkit核心,而webkit號稱是一款全功能的移動瀏覽器,支持 HTML + CSS + JavaScript,但由于移動設備本身與PC的差異,導致我們開發(fā)的網(wǎng)頁在移動設備上總是會存在一些不如人意的地方。

Viewport 翻譯為中文可以叫做“視區(qū)”,大家都知道移動設備的屏幕一段都比PC小很多,webkit瀏覽器會將一個較大的“虛擬”窗口映射到移動設備的屏幕上,默認的虛擬窗口為980像素寬(目前大部分網(wǎng)站的標準寬度),然后按一定的比例(3:1或2:1)進行縮放。也就是說當我們加載一個普通網(wǎng)頁的時候,webkit會先以980像素的瀏覽器標準加載網(wǎng)頁,然后再縮小為490像素的寬度。注意這個縮小是一個全局縮小,也就是頁面上的所有元素都會縮小。

那么我們是否可以改變webkit的視區(qū)呢?當然能,加上如下視區(qū)代碼:

<meta name="viewport" content="width=500" />

那么有沒有更好的方法呢?比如說我們自動檢測移動設備屏幕大小,然后讓內容自適應。很簡單,看來面的代碼:

<meta name="viewport" content="width=device-width" />

device-width將自動檢測移動設備的屏幕寬度。所有頁面內容都和移動設備屏幕自適應。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。

AI