meta小结汇总

手机布局必备——视口 viewport
viewport官网 http://blog.jobbole.com/44319/

    name = "viewport" //视口
    content = "device-width"  //content = "wdith=320"  //屏宽
user-scalable=no /0   //是否允许缩放 
initial-scale=1.0   //初始化缩放 
maximum-scale=1.0, minimum-scale=1.0"  //最大缩放、最小缩放

常用meta汇总：

    苹果设备专有meta:
<!---允许网页以app形式运行(允许添加到主屏幕)--->
<meta name="apple-mobile-web-app-capable" content="yes">

<!---状态栏颜色--->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">


京东meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<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,email=no">

淘宝：
<meta content="yes" name="apple-mobile-web-app-capable"/> 
<!--点击页面区域全屏展示--->
<meta content="yes" name="apple-touch-fullscreen"/> 
<meta content="telephone=no,email=no" name="format-detection"/> 
    
<!--应用信息，保留系统历史记录，运动效果-->
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

    <!-- 强制让360浏览器用chrome内核渲染页面 -->
    <meta name="renderer" content="webkit">

    <!-- 尽量用IE最新的模式渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">

    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">

    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">

    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">

    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">

    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">

    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">

    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">

meta小结汇总

推荐阅读更多精彩内容