網(wǎng)頁寬度自動適應(yīng)手機屏幕寬度的實現(xiàn)代碼(viewport)
發(fā)布時間：2015-08-11 15:18:20 作者：佚名 
我要評論
我要評論這篇文章主要介紹了網(wǎng)頁寬度自動適應(yīng)手機屏幕寬度的實現(xiàn)代碼,需要的朋友可以參考下
一般的寫法如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <meta name="viewport" content="initial-scale=1.0">
較多的寫法：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- 1.<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
在網(wǎng)頁的<head>中增加以上這句話，可以讓網(wǎng)頁的寬度自動適應(yīng)手機屏幕的寬度。
其中：
width=device-width ：表示寬度是設(shè)備屏幕的寬度
initial-scale=1.0：表示初始的縮放比例
minimum-scale=0.5：表示最小的縮放比例
maximum-scale=2.0：表示最大的縮放比例
user-scalable=yes：表示用戶是否可以調(diào)整縮放比例
如果是想要一打開網(wǎng)頁，則自動以原始比例顯示，并且不允許用戶修改的話，則是：
復(fù)制代碼
代碼如下:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
這樣子寫后，就可以把一些頁頭橫幅等的圖片的寬度都設(shè)置成style="width:100%"，整個頁面在設(shè)備上看起來就是全屏的了。
相關(guān)文章
像素密度與CSS3的viewport在移動端Web響應(yīng)式布局中的運用
viewport是CSS3中調(diào)整縮放的利器,特別適用于移動端Web界面的操作與布局,接下來我們就來詳解像素密度與CSS3的viewport在移動端web響應(yīng)式布局中的運用.2016-05-27HTML5移動端開發(fā)中的Viewport標簽及相關(guān)CSS用法解析
這篇文章主要介紹了HTML5移動端開發(fā)中的Viewport標簽及相關(guān)CSS用法解析,Viewport常被叫做視口或視區(qū),在移動端布局和屏幕適配中有著重要的作用,需要的朋友可以參考下2016-04-15簡單總結(jié)CSS3中視窗單位Viewport的常見用法
這篇文章主要介紹了CSS3中視窗單位Viewport的常見用法,包括視窗的高度寬度及垂直居中等基本設(shè)定方法,需要的朋友可以參考下2016-02-04meta標簽中的viewport控制設(shè)備屏幕css
meta標簽中的viewport可以控制設(shè)備屏幕的高度、寬度、初始的縮放比例等等，喜歡的朋友可以了解下2014-08-22- meta標簽中的viewport可以設(shè)置屏幕的css樣式，包括寬、高、初始縮放比例等等2014-07-28
html網(wǎng)頁中meta viewport屬性說明
這篇文章主要介紹了html網(wǎng)頁中meta viewport屬性說明,需要的朋友可以參考下2014-05-07- 這篇文章主要介紹了html的meta viewport屬性說明,需要的朋友可以參考下2014-04-16
- viewport并非只是ios上的獨有屬性，在android、winphone上同樣也有viewport，下面為大家詳細介紹下HTML meta viewport2014-03-12
- 隨著高端手機(Andriod,Iphone,Ipod,WinPhone等)的盛行，移動互聯(lián)應(yīng)用開發(fā)也越來越受到人們的重視，用html5開發(fā)移動應(yīng)用是最好的選擇。然而，每一款手機有不同的分辨率，不2013-12-02
- 在需要調(diào)整設(shè)備瀏覽器的viewport時，我們通常在HTML中使用來解決。但是令人意想不到的是，viewport meta標簽并不具有“規(guī)范性”，即它不是W3C的正式標準，也非Web標準2013-11-10