美文网首页
移动端meta行大全

移动端meta行大全

作者: qhaobaba | 来源:发表于2017-06-26 22:13 被阅读0次

<meta name="viewport"content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )
height: viewport 的高度 (范围从 223 到 10,000 )
initial-scale: 初始的缩放比例 (范围从>0到 10 )
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放


<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="renderer" content="webkit">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

<meta name="msapplication-tap-highlight" content="no">

  1. apple-touch-icon
    < link rel= "apple-touch-icon" sizes= "76x76" href= "touch-icon-ipad.png">
    如果 apple-mobile-web-app-capable 设置为 yes 了,
    那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。
    而设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。

  2. apple-touch-startup-image
    < link rel= "apple-touch-startup-image" href= "/startup.png">
    基于 apple-mobile-web-app-capable 设置为 yes ,
    可以为WebApp设置一个类似NativeApp的启动画面。
    和 apple-touch-icon 不同,
    apple-mobile-web-app-capable 不支持sizes属性,
    要使用media来加载不同的启动画面。

// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

相关文章

  • 移动端meta行大全

    width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )height...

  • viewport

    移动端viewport meta 标签

  • 移动端知识概括

    移动端地图 这两个文件是用来做移动端地图 移动端meta标签   meta标签常用于定义页面的说明,关键字,最后修...

  • 13.移动端meta设置大全

    声明文档使用的字符编码: 优先使用 IE 最新版本和 Chrome: 页面描述: 页面关键词: 网页作者: 搜索引...

  • 移动端 meta

    控制显示区域各种属性: width - viewport的宽度 heig...

  • 移动端meta

    声明文档使用的字符编码: 强制让文档与设备的宽度保持1:1,对页面设置不能进行缩放: 必须联网才可以访问,禁止浏览...

  • 杂项笔记

    移动端如何阻止下拉出现底白 移动端meta表情解决缓存 input框正则输入限制

  • 阿里前端工程师总结HTML5:meta标签。网友:“666”!

    下面就是总结HTML5的标签: 一些常用的移动端的meta属性设置

    一些常用的移动端的meta...

  • 移动端meta设置

    声明文档使用的字符编码 WebApp全屏模式 1.name="viewport" //设置视口(网页可绘制的区...

  • 移动端常用meta

    下面还有一些从知乎copy找到的答案: 作者:陈华链接:https://www.zhihu.com/questio...

网友评论

      本文标题:移动端meta行大全

      本文链接:https://www.haomeiwen.com/subject/zjxscxtx.html