網頁寬度自動適應手機屏幕寬度的實現(xiàn)代碼(viewport)
發(fā)布時間:2015-08-11 15:18:20 作者:佚名
我要評論

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