山西大同网站建设价格,wordpress 主题 速度快,徐州建设工程交易网柖标公告,wordpress修改页面的title本文全然是翻译与总结谷歌官方的教程#xff0c;已确保文档的正确性。 免得大家被五花八门的其它的资料弄混了#xff0c;也没有系统行的学习。 一、设置窗体尺寸和适配屏幕分辨率 谷歌官方文档提到两个大的方面。 1.Viewport视图窗体 这个是html中设置的。主要是设置高度和宽… 本文全然是翻译与总结谷歌官方的教程已确保文档的正确性。 免得大家被五花八门的其它的资料弄混了也没有系统行的学习。 一、设置窗体尺寸和适配屏幕分辨率 谷歌官方文档提到两个大的方面。 1.Viewport视图窗体 这个是html中设置的。主要是设置高度和宽度还有初始的比列。这个宽度与高度将绝对html里面CSS中有多少个像素可用。 Viewport的宽度与屏幕的宽度没有决定性的关系。比方你的手机宽度是480PX可是你能够设置Viewport的宽度为960PX这样一张800PX的图片就能一次性显示完整。由于非常多浏览器比方chrome会尽可能的缩放缩小到能一屏幕能展现整个网页也就是960PX的宽度。 注意:使用webView时并不会默认使用 全局概要模式。也就是自己主动缩小用这种方法设置一下即可setUseWideViewPort(). headtitleExample/titlemeta nameviewport contentwidthdevice-width, user-scalableno /
/head meta nameviewportcontentheight [pixel_value | device-height] ,width [pixel_value | device-width] ,initial-scale float_value ,minimum-scale float_value ,maximum-scale float_value ,user-scalable [yes | no] / 注意除非你确定你的程序自己主动适配的非常好。并且在最小尺寸下也能使用否则不要关闭user-scalable。 2.屏幕分辨率 html在CSS中写的像素单位。在Android中等同于160DPI的手机。假设是320DPI的手机就会对这个单位进行放大。比方假设一张300像素宽的图片。在160PI中能正常的显示。可是到了320DPI中的手机就会放大两倍。这个时候图片就会失真模糊。有纹理。 二、通过CSS来适配 1.不同分辨率使用不同的CSS 通过设置-webkit-device-pixel-ratio 这个属性0.75,1,,1.5来相应低分率中分辨率高分辨率。事实上就是以下的写法 link relstylesheet mediascreen and (-webkit-device-pixel-ratio: 1.5) hrefhdpi.css /
link relstylesheet mediascreen and (-webkit-device-pixel-ratio: 1.0) hrefmdpi.css / 2.或者通过不同的style和样式表。写法例如以下 #header {background:url(medium-density-image.png);
}media screen and (-webkit-device-pixel-ratio: 1.5) {/* CSS for high-density screens */#header {background:url(high-density-image.png);}
}media screen and (-webkit-device-pixel-ratio: 0.75) {/* CSS for low-density screens */#header {background:url(low-density-image.png);}
} 很多其它关于怎样适配分辨率尤其是图片的适配能够參见 High DPI Images for Variable Pixel Densities.。 稍后假设有时间会把这个链接里面的内容也总结一下。 三、通过javascript来适配 写法例如以下 Android浏览器或者WebView会通过 window.devicePixelRatio这个DOM文档定义的属性来指定当前的缩放比例。 默认的缩放比例是1.0.能够通过例如以下代码来获取比例并作出相应的处理。 if (window.devicePixelRatio 1.5) {alert(This is a high-density screen);
} else if (window.devicePixelRatio 0.75) {alert(This is a low-density screen);
} 转载于:https://www.cnblogs.com/zfyouxi/p/5137673.html
