標籤：format item cal class height 儲存 one a標籤 聲明
將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：表示：使用者是否可以調整縮放比例
另外：如果想控制字型的大小的話，應該使用相對大小，可以用下面這段代碼，一般不用也可，這裡只是說名一種方法。
相對大小的字型
字型也不能使用絕對大小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）。
如何?手機自動適應網頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
