H5开发之meta设置

标准化H5开发的meta设置：

<head>
    <meta charset="utf-8">
    <!-- 兼容ie8浏览器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--文档的宽度等于设备宽度；初始缩放比例1:1；最多缩放比例1；不允许缩放；-->
    <meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--这个也是iphone私有标签，允许全屏浏览。-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--iphone的私有标签，iphone顶端状态条的样式。-->
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
    <meta content="telephone=no" name="format-detection">
    <!--禁止email识别-->
    <meta content="email=no" name="format-detection">
    <!-- 图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>

其他meta设置：

<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- ios-safari浏览器顶部的状态栏；默认值default（白色），可选值black（黑色）、black-translucent（灰色半透明）-->

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios-safari：允许全屏模式浏览，隐藏浏览器导航栏 -->

 

posted @ 2022-05-16 09:59  yangchin9  阅读(294)  评论(0)  编辑  收藏  举报