开发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. CFont 字体类

    CFont 字体类 初始化函数 CreateFontIndirect 初始化一个由LOGFONT结构给出其特征的CFont对象 CreateFont 初始化用指定特性定义的CFont对象 Create ...

  2. pdf转图片

    public class FileUtil { public static void main(String[] args) { try { System.out.println(System.cur ...

  3. UIApplication-备用

    iPhone应用程序是由主函数main启动,它负责调用UIApplicationMain函数,该函数的形式如下所示: int UIApplicationMain ( int argc, char *a ...

  4. LINQ 学习笔记(1)

    学习资源参考 : http://www.cnblogs.com/lifepoem/archive/2011/12/16/2288017.html 常用方法是 Where, OrderBy, Selec ...

  5. Local System/Network Service/Local Service

    // The name of the account under which the service should run// 1 NT AUTHORITY\\SYSTEM 2 NT AUTHORIT ...

  6. JS Map 简单实现

    /* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, v ...

  7. Linux企业级项目实践之网络爬虫(26)——线程池

    一旦有一个抓取请求开始,就创建一个新的线程,由该线程执行任务,任务执行完毕之后,线程就退出.这就是"即时创建,即时销毁"的策略.尽管与创建进程相比,创建线程的时间已经大大的缩短,但 ...

  8. bzoj1965 [Ahoi2005]SHUFFLE 洗牌

    Description 为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度过相当长的一段时间,小联 ...

  9. Oracle_Q&A_04

    2014-12-19作业 [JSU]LJDragon's Oracle course tasks In the first semester, junior year --1.在管理员权限下创建一个新 ...

  10. jTemplates——学习(1)

    这里介绍一个基于jQuery开发的模板引擎. jTemplates目前最新的版本是0.7.8,由tPython开发.官方网站:http://jtemplates.tpython.com 两个附件, 一 ...