Webapp开发之设备像素如何调整-职坐标

Webapp开发之设备像素如何调整

白羽 2018-06-14 来源：网络阅读 836 评论 0

摘要：本文将带你了解Webapp开发之设备像素如何调整，希望本文对大家学WEBAPP有所帮助。

webapp meta

<meta name="renderer" content="webkit">

MobileOptimized

MobileOptimized 移动优化

fit-to-screen网站自适应屏幕

如果content的值小于或等于screen width 网站自适应屏幕fit-to-screen将被关闭网站不会随着浏览器拉伸缩放

如果content的值大于screen width;fit-to-screen将开启

viewport

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

是否启动webapp功能设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏

format-detection

iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！

telephone=no就忽略页面中的数字识别为电话号码

telephone=yes就开启了把数字转化为拨号链接,在默认是情况下就是开启！

status-bar-style

控制状态栏显示样式 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倍。

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 ||