上一篇
下一篇
wap手機頁面自動適應手機屏幕寬度
作者:晉城網站建設 日期:2013-11-17
<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：表示用戶是否可以調整縮放比例
- 如果是想要一打開網頁，則自動以原始比例顯示，并且不允許用戶修改的話，則是：
- [html] view plaincopy
- <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%"，整個頁面在設備上看起來就是全屏的了
html5開發的wap網站這三個分別代表什么含義？
<meta name="MobileOptimized" content="240"/> //瀏覽器不會自動調整文件的大小,不會隨著瀏覽器拉伸縮放。
<meta name="apple-touch-fullscreen" content="YES" />"添加到主屏幕“后，全屏顯示 <meta name="apple-mobile-web-app-capable" content="yes" /> 如果內容設置為YES，Web應用程序運行在全屏模式;否則，它不會。默認行為是使用Safari瀏覽器顯示網頁內容
Tags: ,