开发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屏幕适配标签设置的更多相关文章

  1. android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高

    1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...

  2. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  3. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  4. Html5_移动前端不得不了解的html5 head 头标签

    移动前端不得不了解的html5 head 头标签   本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...

  5. 移动前端不得不了解的HTML5 head 头标签(2016最新版)

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  6. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

  7. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  8. JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

    1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...

  9. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

随机推荐

  1. [POJ] 3020 Antenna Placement(二分图最大匹配)

    题目地址:http://poj.org/problem?id=3020 输入一个字符矩阵,'*'可行,'o'不可行.因为一个点可以和上下左右四个方向的一个可行点组成一个集合,所以对图进行黑白染色(每个 ...

  2. 如何给网页标题栏上添加图标(favicon.ico)

    favicon.ico详解:     favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹.地址栏和标签标题前面的个性化图标. 设置步骤: 1. 把做好的f ...

  3. mysql主从复制错误:Last_SQL_Error: Error 'Duplicate entry '327' for key 'PRIMARY'' on query. Default database: 'xxx'. Query: 'insert into

    这个算不算解决,我都不太清楚,因为我感觉网上的说法,只是把错误忽略了,不表示以后用从库时不会出问题!!! 解决的办法是在从库上执行: mysql> slave stop; mysql> s ...

  4. Bug解决过程复盘

    反思了下,解决问题无外乎3w1h when where who how 就是查询出来的事情多了,现在不知道哪个地方出问题,应该根据日志一步一步梳理,查看每一步的输出结果是否与预期一致 顺藤摸瓜 觉得不 ...

  5. ActionResult 的返回类型

    大多数操作方法会返回从 ActionResult 中派生的类的实例. ActionResult 类是所有操作结果的基础. 不过,也存在不同的操作结果类型,具体取决于操作方法执行的任务. 例如,最常见的 ...

  6. [LeetCode] Course Schedule I (207) & II (210) 解题思路

    207. Course Schedule There are a total of n courses you have to take, labeled from 0 to n - 1. Some ...

  7. hadoop2.2.0 MapReduce分区

    package com.my.hadoop.mapreduce.partition; import java.util.HashMap;import java.util.Map; import org ...

  8. PE基金的运作模式有哪些?

    一.信托制(1)信托型基金是由基金管理机构与信托公司合作设立,通过发起设立信托受益份额募集资金,然后进行投资运作的集合投资工具(2)信托公司和基金管理机构组成决策委员会实施,共同进行决策(3)在内部分 ...

  9. maven+spring mvc初尝试

    只是一个可以运行的例子,俺们来看看. 目录结构: pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xml ...

  10. Label 添加表情图片

    // 添加表情 NSTextAttachment *attch = [[NSTextAttachment alloc] init]; // 表情图片 attch.image = [UIImage im ...