<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" />

<!-- 启用360浏览器的极速模式(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">

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行大全的更多相关文章

  1. 移动端meta设置大全

    声明文档使用的字符编码:  <meta charset='utf-8'> 强制让文档与设备的宽度保持1:1,对页面设置不能进行缩放: <meta name="viewpor ...

  2. meta标签大全

    meta标签大全 <!--     x-ua-compatible(浏览器兼容模式)     仅对IE8+以效     告诉浏览器以什么版本的IE的兼容模式来显示网页     <meta ...

  3. 移动端meta标签设置

    移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...

  4. 《Linux命令行大全》系列(三、Linux 系统)

    在<Linux命令行大全>一书中,第3章名称是 Linux 系统. 概念太大,不过该节内容却是 Linux 系统最为核心的基础——查看 Linux 系统. ls 命令 显示目录自身信息或目 ...

  5. META http-equiv 大全

    META http-equiv 大全 HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的HTTP-EQUIV类型有: 1.Content ...

  6. meta标签大全(荐)

    html的meta总结(常用) 1.Meta标签大全 <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最 ...

  7. 移动端meta 解释

    移动端meta 解释 <meta name="viewport" content="width=device-width, initial-scale=1.0, u ...

  8. php开发面试题---Mysql常用命令行大全

    php开发面试题---Mysql常用命令行大全 一.总结 一句话总结: 常见关键词:create,use,drop,insert,update,select,where ,from.inner joi ...

  9. meta 标签大全

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

随机推荐

  1. 使用git pull与本地文件冲突

    出错信息如下: error: Your local changes to 'c/environ.c' would be overwritten by merge. Aborting. Please, ...

  2. ZooKeeper自定义数据日志目录

    安装版本:zookeeper-3.4.10 问题描述: ZooKeeper在启动时会将zookeeper.out输出到当前目录,不仅不友好,有时候可能会因为目录权限问题引发一些不必要的麻烦. 脚本分析 ...

  3. python递归、collections系列以及文件操作进阶

    global log 127.0.0.1 local2 daemon maxconn log 127.0.0.1 local2 info defaults log global mode http t ...

  4. Windows Server 2008 R2微软官方下载

    注意:Windows Server 2008 R2仅有64位版本. 以下下载地址为Windows Server 2008 R2 RTM Build 7600.16385的评估版本,此版本可免费试用18 ...

  5. 吴裕雄 python深度学习与实践(2)

    #coding = utf8 import threading,time,random count = 0 class MyThread (threading.Thread): def __init_ ...

  6. Kubernetes+Prometheus+Grafana部署笔记

    一.基础概念 1.1 基础概念 Kubernetes(通常写成“k8s”)Kubernetes是Google开源的容器集群管理系统.其设计目标是在主机集群之间提供一个能够自动化部署.可拓展.应用容器可 ...

  7. 对一个结果集(List)进行手动分页

    对一个链表List,进行手动分页,核心代码就是pagin函数: import lombok.extern.slf4j.Slf4j; import org.junit.Before; import or ...

  8. 3G开发遇到的问题

    1.使用线程时,编译时要加上gcc xxx.c -o xxx -lpthread 2.分离字符串"abc,de,fgh" printf("%s",strtok ...

  9. sql-mybatis-多表查询不查的字段一定不要查

    在多表联查的时候,这时用的是左外联(即如果右边的没有就查出左边的表) 如果右边的没有,那么在Navicat中查询出如下图 而在mybatis中运用同样的查询语句时,查询出来字段的也是这样 这时如果左表 ...

  10. 在Laravel外独立使用laravel-mongodb

    laravel框架外部使用laravel-mongodb 插件 下载安装方式主要根据github上的参考: https://github.com/jenssegers/laravel-mongodb# ...