HTML5手机网站建设页面宽度解决方法

相信大伙都了解，目前市面上手机的屏幕尺寸多种多样，2.8寸、3.0寸、3.2寸、3.5寸、4.0寸、4.2寸、4.5寸等等，随之而来的手机分辨率也千差万别，有240*320像素、320*480像素、480*800像素、640*960像素等等，其中480*800像素和640*960像素是主流的，但智能手机的进步速度大伙有目共睹，伴随手机的进步，不同尺寸的手机会陆续出现，这就给手机网站的开发带来很大的麻烦，怎么样让我们的手机网站在不同尺寸的手机都能好展示，手机网站的设计稿要设计成多大才适合？只须稍微有关注网络的，应该都了解HTML5，HTML5的强大毋庸置疑，由于PC网站的浏览器更新太困难，致使兼容性不好，所以HTML5的新技术在PC网站非常难实行，但手机浏览器更新很飞速，基本可以好支持HTML5+CSS3。这里博久网络介绍HTML5的一个viewport功能怎么样让网站适应不同分辨率的手机浏览器。viewport语法如下HTML5手机网站建设页面宽度解决方法低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。下面是 target-densitydpi 属性的 取值范围device-dpi –用设施原来的 dpi 作为目的 dp。 不会发生默认缩放。high-dpi – 用hdpi 作为目的 dpi。 中等像素密度和低像素密度设施相应缩小。medium-dpi – 用mdpi作为目的 dpi。 高像素密度设施相应放大， 像素密度设施相应缩小。 这是默认的target density.low-dpi -用mdpi作为目的 dpi。中等像素密度和高像素密度设施相应放大。 – 指定一个具体的dpi 值作为target dpi. 这个值的范围需要在70–400之间。为了预防Android Browser和WebView 依据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会依据目前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width概念为与设施的width匹配，如此你的页面就能和屏幕相适应。initial-scale初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。比如，假如你设置初始缩放为“1.0”，那样，web页面在展示的时候就会以target density分辨率的1:1来展示。假如你设置为“2.0”，那样这个页面就会放大为2倍。maximum-scale更大缩放。即允许的更大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的更大乘数。比如，假如你将这个值设置为“2.0”，那样这个页面与target size相比，最多能放大2倍。user-scalable用户调整缩放。即用户是不是能改变页面缩放程度。假如设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。假如你将它设置为no，那样minimum-scale 和 maximum-scale都将被忽视，由于根本不可能缩放。所有些缩放值都需要在0.01–10的范围之内。例HTML5手机网站建设页面宽度解决方法HTML5手机网站建设页面宽度解决方法推荐网址：