H5页面通用头部

小白自用 也为了方便自己复制粘贴 勿喷

通用设置项
    <!-- 页面编码 -->
    <meta charset="UTF-8" />
    <!-- 缓存与过期时间设置 -->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta http-equiv="Expires" content="0">
    
    <!-- dns预加载(SEO优化) -->
    <link rel="dns-prefetch" href="//css.cdn.com" />
    <link rel="dns-prefetch" href="//js.cdn.com" />
    
    <!-- 宽度默认100%全屏宽度,禁止手指缩放,初始缩放值1.0 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
可配置项
<!-- ====根据使用配置Start==== -->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    
    <!-- 不自动识别手机号,邮箱地址 -->
    <meta name="format-detection" content="telephone=no,email=no">
    
    <!-- 页面关键字优化 -->
    <meta name="keywords" content="H5页面通用配置">
    <!-- 页面标签icon配置 -->
    <link rel="icon" href="//icon.img.com/favicon.ico" type="image/x-icon">
    <!-- 一些国内webkit内核浏览器默认使用极速模式 -->
    <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">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    
    <!-- apple-touch-icon:在webapp下,指定放置主屏幕上 icon 文件路径 -->
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    
    <!-- apple-touch-startup-image:在 webapp 下,设置启动时候的界面 -->
    
    <link rel="apple-touch-startup-image" href="/startup.png" />
   
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容