html网页页面中meta viewport特性表明

HTML meta viewport特性表明

甚么是Viewport

手机上访问器是把网页页面放在1个虚似的“对话框”(viewport)中,一般这个虚似的“对话框”(viewport)比显示屏宽,这样就无需把每一个网页页面挤 到很小的对话框中(这样会破坏沒有对于手机上访问器提升的网页页面的合理布局),客户能够根据平移和放缩看来网页页面的不一样一部分。挪动版的 Safari  访问器全新引进了 viewport 这个 meta tag,让网页页面开发设计者来操纵 viewport 的尺寸和放缩,别的手机上访问器也基础适用。

Viewport 基本

1个常见的对于挪动网页页面提升过的网页页面的 viewport meta 标识大概以下:

拷贝编码
编码以下:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:操纵 viewport 的尺寸,能够特定的1个值,假如 600,或独特的值,如 device-width 为机器设备的宽度(企业为放缩为 100% 时的 CSS 的像素)。
height:和 width 相对性应,特定高宽比。
initial-scale:原始放缩占比,也就是当网页页面第1次 load 的情况下放缩占比。
maximum-scale:容许客户放缩到的最大占比。
minimum-scale:容许客户放缩到的最少占比。
user-scalable:客户是不是能够手动式放缩

有关viewport的1些难题

viewport并不是只是ios上的特有特性,在android、winphone上一样也是有viewport。它们要处理的难题是同样的,即疏忽机器设备的 真正辨别率,立即根据dpi,在物理学规格和访问器之间更改辨别率,这个辨别率和机器设备的辨别率不相干。例如,你拿个3.5寸⑶20 *  480的iphone3 gs、3.5寸⑹40 *  960的iphone4或9.7寸⑴024*768的ipad2,尽管机器设备的辨别率不一样,物理学规格也不一样,但你能够根据设定viewport让它们在 访问器里有同样的辨别率。例如说,你的网站是800px宽,你能够根据设定viewport的width=800,来让你的网站在这3个不一样的机器设备上都刚 好满屏显示信息你的网站。

以上的专业知识,坚信每一个对viewport稍有掌握的同学应当都早已掌握了。这并不是我今日想说的关键。我想表明的是viewport在ios和android上的1些差别主要表现。

在网上1搜有关viewport的专业知识,基础上统统是以下信息内容:

拷贝编码
编码以下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

这段编码的意思是,让viewport的宽度等于物理学机器设备上的真正辨别率,不容许客户放缩。1都流行的web  app全是这么设定的,它的功效实际上是有意放弃viewport,不放缩网页页面,这样dpi毫无疑问和机器设备上的真正辨别率是1样的,不做任何放缩,网页页面会因而显 得更高细致。玩ps的同学应当都了解,当你将1张1000 * 1000的照片立即放缩至500 * 500分变为甚么样,对吧?照片的失真1定逃不掉。

 

但我要做的1个运用却刚好相反,必须运用viewport,运用放缩。无论真正辨别率是是多少,不管物理学规格是是多少,我都期待在访问器里,能有统1的辨别 率,另外也不容许客户放缩。我用来检测的机器设备有:iphone4、ipad2、htc的g11、不知道道甚么厂商的aquos  phone(android系统软件)、华硕的android pad、dell的winphone随后我1路遇到了以下难题:

 

1)假如无法显示地设定viewport,那末width的默认设置为980。假如网页页面的全部元素宽度都小于980,此时width为980,假如网页页面最 宽的部位超出980,那末width等于最大宽度。总而言之,默认设置能将全部网页页面从左到右显示信息出来。假如设定了viewport,例如,只单纯性地设定了 user-scalable=no,比如<meta name="viewport" content="user-scalable=no"  />,那末ios下width還是按980显示信息(即默认设置就会根据dpi放缩),但android和winphone下却不容易再放缩了,访问器辨别率 和真正设定辨别率1致。

 

2)针对ios机器设备,设定width能够起效,但针对android,设定width其实不会起效。ios机器设备,放缩的比率即dpi是根据你设定的 width和设定真正辨别率全自动测算的,而android下你设定width失效,你能设定的是1个独特的字段target-densitydpi,也便是说,有3个自变量:访问器width、机器设备真正width、dpi。  大家简易地用个公式来表述它们之间的关联吧(并不是真正关联,简易表明用) 机器设备真正width * dpi =  访问器width,这里的3个自变量,机器设备真正width是个大家不可以实际操作的已知值,此外两个自变量大家能够设定1个来危害另外一个,在ios中,大家能改的是 访问器width,dpi全自动转化成,而在android中,大家能改的是dpi,访问器width全自动转化成。针对android,不管大家怎样设定 width,也不容易对访问器width造成危害。

ps:这里我此外再说1个怪异的难题:在htc的g11里(htc的手机上我仅有这1个,其他沒有测),假如设定了dpi而无法显示地设定width, 则user-scalable=no不起效,就是说:<meta name="viewport"  content="target-densitydpi=300,user-scalable=no"  />,没法阻拦客户放缩显示屏。大家必须显示信息地设定1下width值,仅管这个值对android下的访问器辨别屏其实不造成任何危害(对ios還是会 造成危害的),大家依然要设定它,并且这个值1定要超过320,假如小于等于320,也没法使user-scalable=no起效。这个难题只在htc 的g11手机上上出現,在aquos  phone沒有这个难题。适配android简直件头痛的事  @_@,将来还不知道道有是多少坑呢。而在winphone上,結果就更怪异了:我给viewport的width设1个超过480的值,user- scalable=no就无效了,而设1个小于480的值,user-scalable=no能起效。但不管我给viewport的width设是多少值, 对winphone真实显示信息的width却其实不造成我预期的危害,根据target-densitydpi也沒有危害。设定width,假如小于480的 话,显示屏会放缩,但变小的占比却和我预期彻底不1样,我不知道道它是依照甚么规律性放缩的。不知道道这是winphone的难题,還是dell完成的难题。

 

3)这1条和上1条应当是立即有关的:ios机器设备在横纵屏时,会全自动调剂dpi,不管横屏還是竖屏,都能确保访问器width等于viewport 中设定的值,因此横纵屏的情况下,网页页面里显示信息的內容的尺寸是会全自动放缩造成转变的。而android手机上在横纵屏的情况下,不容易更改dpi,在横纵屏的情况下, 网页页面不容易造成放缩。也正因而,ios能够确保横纵屏网页页面都不容易造成翻转条,满屏显示信息,而android却没法确保这1点,横着满屏则竖着没法满屏,反之亦 然。

 

4)针对ios机器设备,假如width显示信息界定了,而网页页面最宽的部位超出width的话,width失效,仍按最宽的宽度来显示信息(不容易有翻转条)。但 此时会出現1个很怪异的难题,当你将手机上横纵屏切换几回以后,会发现你的网页页面全自动变大了,出現了翻转条,但实际上变大后的宽度实际上和你设的width也并没 相关系。以便避免这类状况出現,你必须将width的宽度设定得比网页页面最宽的地区更大,或同样。