webapp meta和设备像素比devicePixelRatio
webapp 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">
<!--这meta的作用就是删除默认的苹果工具栏和菜单栏-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--网站开启对web app程序的支持-->
<meta name="apple-touch-fullscreen" content="yes">
<!--手机号码不被显示为拨号链接-->
<meta name="format-detection" content="telephone=no">
<!--在web app应用下状态条(屏幕顶部条)的颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!--移动web页面是否自动探测电话号码-->
<meta http-equiv="x-rim-auto-match" content="none">
MobileOptimized
<meta name="MobileOptimized" content="width">MobileOptimized 移动优化fit-to-screen网站自适应屏幕如果content的值小于或等于screen width 网站自适应屏幕fit-to-screen将被关闭网站不会随着浏览器拉伸缩放如果content的值大于screen width;fit-to-screen将开启
viewport
<meta name="viewport" content="width=device-width,height=device-height, minimum-scale=1.0, maximum-scale=1.0,initial-scale=1, user-scalable=no"/>width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。
maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。
所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。
apple-mobile-web-app-capable
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏
format-detection
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no" />
iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!
telephone=no就忽略页面中的数字识别为电话号码
telephone=yes就开启了把数字转化为拨号链接,在默认是情况下就是开启!
status-bar-style
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />控制状态栏显示样式 default(白色)black(黑色) black-translucent(灰色半透明)
link标签apple-touch-icon
如果apple-mobile-web-app-capable
设置为yes
了,那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
而通过设置相应apple-touch-icon
标签,则添加到主屏上的图标就会使用我们指定的图片。
以下是针对ox不同设备,选择一个最优icon。默认iphone的大小为60px,ipad为76px,retina屏乘以2倍。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
ios7以前系统默认会对图标添加特效(圆角及高光),如果不希望系统添加特效,则可以用apple-touch-icon-precomposed.png
代替apple-touch-icon.png
图标使用的优先级如下:
如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标,会自动搜索网站根目录下以apple-touch-icon
为前缀的png图标。
注:ios7不再为icon添加特效,ios7以前则默认为icon添加特效,除非icon有关键字-precomposed.png
为后缀。
devicePixelRatio
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dips
关于canvas在retina屏下绘制文字或图像模糊的解决方案
熟悉retina屏的同学应该都知道,在浏览器的window变量中有一个devicePixelRatio的属性,该属性决定了浏览器会用几个(通常是2个)像素点来渲染1个像素,举例来说,假设devicePixelRatio的值为2,一张100x100像素大小的图片,在retina屏幕下,会用2个像素点的宽度去渲染图片的1个像素点,因此该图片在retina屏幕上实际会占据200x200像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。
知道了这一点,关于canvas的问题也就容易理解了。我们可以把canvas当成是一张图片,当浏览器去渲染canvas的时候,他会用2个像素点的宽度去渲染canvas,因此在大多数retina设备的浏览器中会出现绘制的图片或文字变模糊的情况。
但是在iOS6下的safari会正常显示。
原因在于 在window中有一个devicePixelRatio的属性,类似的,在canvas context中也存在一个webkitBackingStorePixelRatio的属性(仅safari和chrome),该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。在iOS6下的safari中的值是2,因此,如果将一张100x100像素的图片绘制到safari中,该图片首先会在内存中生成一张200x200的图片,然后浏览器渲染的时候,会按100x100的图片来渲染,因此就变成了200x200,正好和内存中的图片大小一致,因此在iOS的safari中不会出现失真的问题。但是在chrome和iOS7的safari中却出现了失真,其原因是,chrome和iOS7中的safari的webkitBackingStorePixelRatio值都是1。值得一提的是在iOS7中,苹果把webkitBackingStorePixelRatio的值置为了1,目的是处于性能的考虑。
故canvas大小需要 乘以ratio=devicePixelRatio/webkitBackingStorePixelRatio
css( canvas, {
width : width + "px",
height : height + "px"
} );
canvas.width = width * ratio;
canvas.height = height * ratio;注;
var gc = canvas.getContext( "2d" );backingStoreRatio=webkitBackingStorePixelRatio ||
gc.mozBackingStorePixelRatio ||
gc.msBackingStorePixelRatio ||
gc.oBackingStorePixelRatio ||
gc.backingStorePixelRatio || 1,