如何实现手机自动适应网页
將PC網站轉化為手機自適應網頁或者自己制作手機自適應網頁其實很簡單，可以利用meta標簽聲明。
工具/原料
sublime text
一方法/步驟
打開你需要制作手機網頁的html或者php等等網頁源碼文件。在<head></head>之間加入meta標簽。
向瀏覽器聲明該網頁為移動設備自適應網頁的meta標簽為：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
3
將以上標簽加入之后保存，再用手機打開即是自適應網頁了。
二方法/步驟
方法：在網頁頭部加上這樣一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
解釋：
width=device-width ：寬度等于設備屏幕的寬度
initial-scale=1.0：表示：初始的縮放比例
minimum-scale=0.5：表示：最小的縮放比例
maximum-scale=2.0：表示：最大的縮放比例
user-scalable=yes：表示：用戶是否可以調整縮放比例
2
另外：如果想控制字體的大小的話，應該使用相對大小，可以用下面這段代碼，一般不用也可，這里只是說名一種方法。
相對大小的字體
字體也不能使用絕對大小px，而只能使用相對大小em。
body {font: normal 100% Helvetica, Arial, sans-serif;}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1 {font-size: 1.5em; }
然后，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small {font-size: 0.875em;}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
總結
以上是生活随笔為你收集整理的如何实现手机自动适应网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 普通高中生水平就能干好的编程到底是不是高
- 下一篇： 在打开的Web表单模态窗口中,避免点击服