移动端meta行大全
<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行大全的更多相关文章
- 移动端meta设置大全
声明文档使用的字符编码: <meta charset='utf-8'> 强制让文档与设备的宽度保持1:1,对页面设置不能进行缩放: <meta name="viewpor ...
- meta标签大全
meta标签大全 <!-- x-ua-compatible(浏览器兼容模式) 仅对IE8+以效 告诉浏览器以什么版本的IE的兼容模式来显示网页 <meta ...
- 移动端meta标签设置
移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...
- 《Linux命令行大全》系列(三、Linux 系统)
在<Linux命令行大全>一书中,第3章名称是 Linux 系统. 概念太大,不过该节内容却是 Linux 系统最为核心的基础——查看 Linux 系统. ls 命令 显示目录自身信息或目 ...
- META http-equiv 大全
META http-equiv 大全 HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的HTTP-EQUIV类型有: 1.Content ...
- meta标签大全(荐)
html的meta总结(常用) 1.Meta标签大全 <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最 ...
- 移动端meta 解释
移动端meta 解释 <meta name="viewport" content="width=device-width, initial-scale=1.0, u ...
- php开发面试题---Mysql常用命令行大全
php开发面试题---Mysql常用命令行大全 一.总结 一句话总结: 常见关键词:create,use,drop,insert,update,select,where ,from.inner joi ...
- meta 标签大全
相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...
随机推荐
- 使用git pull与本地文件冲突
出错信息如下: error: Your local changes to 'c/environ.c' would be overwritten by merge. Aborting. Please, ...
- ZooKeeper自定义数据日志目录
安装版本:zookeeper-3.4.10 问题描述: ZooKeeper在启动时会将zookeeper.out输出到当前目录,不仅不友好,有时候可能会因为目录权限问题引发一些不必要的麻烦. 脚本分析 ...
- python递归、collections系列以及文件操作进阶
global log 127.0.0.1 local2 daemon maxconn log 127.0.0.1 local2 info defaults log global mode http t ...
- Windows Server 2008 R2微软官方下载
注意:Windows Server 2008 R2仅有64位版本. 以下下载地址为Windows Server 2008 R2 RTM Build 7600.16385的评估版本,此版本可免费试用18 ...
- 吴裕雄 python深度学习与实践(2)
#coding = utf8 import threading,time,random count = 0 class MyThread (threading.Thread): def __init_ ...
- Kubernetes+Prometheus+Grafana部署笔记
一.基础概念 1.1 基础概念 Kubernetes(通常写成“k8s”)Kubernetes是Google开源的容器集群管理系统.其设计目标是在主机集群之间提供一个能够自动化部署.可拓展.应用容器可 ...
- 对一个结果集(List)进行手动分页
对一个链表List,进行手动分页,核心代码就是pagin函数: import lombok.extern.slf4j.Slf4j; import org.junit.Before; import or ...
- 3G开发遇到的问题
1.使用线程时,编译时要加上gcc xxx.c -o xxx -lpthread 2.分离字符串"abc,de,fgh" printf("%s",strtok ...
- sql-mybatis-多表查询不查的字段一定不要查
在多表联查的时候,这时用的是左外联(即如果右边的没有就查出左边的表) 如果右边的没有,那么在Navicat中查询出如下图 而在mybatis中运用同样的查询语句时,查询出来字段的也是这样 这时如果左表 ...
- 在Laravel外独立使用laravel-mongodb
laravel框架外部使用laravel-mongodb 插件 下载安装方式主要根据github上的参考: https://github.com/jenssegers/laravel-mongodb# ...