HTML5屏幕适配标签设置
开发HTML5游戏中,我们常用的一些mata标签:
<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设置 -->
<!-- 启用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">
此外,apple还有两个有趣的标签:
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" />
参考:
http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html
http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html
http://blog.sina.com.cn/s/blog_3f1fc8950101fz2v.html
HTML5屏幕适配标签设置的更多相关文章
- android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高
1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...
- [转] 移动前端不得不了解的HTML5 head 头标签
HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
- Html5_移动前端不得不了解的html5 head 头标签
移动前端不得不了解的html5 head 头标签 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...
- 移动前端不得不了解的HTML5 head 头标签(2016最新版)
小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...
- HTML5新结构标签和移动端页面布局
--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...
- 了解真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
随机推荐
- C程序设计语言练习题1-18
练习1-18 编写一个程序,删除每个输入行末尾的空格及制表符,并删除完全是空格的行. 代码如下: #include <stdio.h> // 包含标准库的信息. #define MAXLI ...
- 003-C运算符
运算符 C语言有34种运算符,常见的有加减乘除. 1>算术运算符 1.加 10+2 2.减 20-2 3.乘 12*2 4.除 10/2 5.取余 10%3 = 1; 10%-3 = 1; -1 ...
- d017: 打印某年某月有几天
内容: 打印某年某月有几天 输入说明: 一行两个整数,前面是年份 后面是月份 输出说明: 一个整数 输入样例: 2009 6 输出样例 : 30 #include <stdio.h> ...
- 文件下载cordovaFileTransfer:cordova.file.documentsDirectory is null
在Android平台上使用:$cordovaFileTransfer进行文件下载时提示:cordova.file.documentsDirectory is null,查了以下文档参照:http:// ...
- Boost编程之获取可执行文件的当前路径
#include <boost/filesystem/path.hpp> #include <boost/filesystem/operations.hpp> std::str ...
- 就是一段程序,可以求出N个不等长列表中取N个元素形成的所有组合
def get_result_in_vector(vector, N, tmp, tmp_result): """ :param vector:所有组合的拼接 :para ...
- ios drawRect NSString 绘制
- (void)drawRectFor7 { #if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_7_0 UIFont *font = [UIFont ...
- Ajax请求用户控件(.ascx)404错误
- Oracle11g完全卸载步骤
Oracle11g完全卸载步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...
- Java基础知识强化67:基本类型包装类之Integer直接赋值的面试题
1. 面试题: Integer i = 1: i += 1: 做了哪些事情? (1)其中Integer i =1:做了自动装箱( 使用valueOf()方法,int ---> Integer ...