rem自適應
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script>
var deviceWidth = window.innerWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
</script>
也可以這么寫
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
meta標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 設置字符編碼 -->
<meta name='apple-touch-fullscreen' content='yes'> <!-- 設置在蘋果手機上以應用模式啟動時，是否全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios 系統 作用未知 -->
<meta content="fullscreen=yes,preventMove=no" name="ML-Config"> <!-- iso 系統 作用未知 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- iso 系統 作用未知 -->
<meta name="format-detection" content="telephone=no,email=no,address=no" /> <!-- 是否識別 手機號碼、
電子郵件 地址 等-->
<meta content="black" name="apple-mobile-web-app-status-bar-style"><!-- 在web app應用下狀態條
（屏幕頂部條）的顏色；默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）-->
<meta name="msapplication-tap-highlight" content="no" /> <!-- 取消點擊灰色背景 -->
<title>演示</title
<style>
body{
-webkit-tap-highlight-color: rgba(255,255,255,0);/*同上取消點擊背景*/
}
</style>
</head>
<body>
</body>
</html>
作者：陳華
鏈接：https://www.zhihu.com/question/39081139/answer/81689906
來源：知乎
一、天貓
<title>天貓觸屏版</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
二、淘寶
<title>淘寶網觸屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ?m.taobao.com 版權所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">
三、京東
<title> 京東 - 手機版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手機購物,WAP商城,日用百貨,3C家電,汽車用品">
<meta name="description"
content="京東手機版提供了包括數碼、家電、手機、電腦配件、網絡產品、
日用百貨等數萬種商品，手機快捷購物，就上京東手機版。">
四、網易
<title>手機網易網</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">
五、百度
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
meta指元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。 標簽位于文檔的頭部，不包含任何內容。 標簽的屬性定義了與文檔相關聯的名稱/值對。
手機端特有的有哪些？
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
第一個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
在web app應用下狀態條（屏幕頂部條）的顏色；
默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意：若值為“black-translucent”將會占據頁面px位置，浮在頁面上方
（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
第四個meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼。
