400-800-9385
网站建造资讯详细

HTML5手机伟德备用网址页面宽度解决方案

宣布日期:2013-08-30 00:00:00   作者来历:伟德国际网络   阅读:26673   标签:手机伟德备用网址    手机网站建造    手机网站制造    手机网站规划    
    信任咱们都知道,现在市面上手机的屏幕尺度多种多样,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语法如下:
01  <!-- html document -->
02  <meta name="viewport"
03      content="
04          height = [pixel_value | device-height] ,
05          width = [pixel_value | device-width ] ,
06          initial-scale = float_value ,
07          minimum-scale = float_value ,
08          maximum-scale = float_value ,
09          user-scalable = [yes | no] ,
10          target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
11      "
12  />
width
操控 viewport 的巨细,能够指定的一个值或许特别的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height
和 width 相对应,指定高度。

target-densitydpi
一个屏幕像素密度是由屏幕分辨率决议的,一般界说为每英寸点的数量(dpi)。Android支撑三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默许屏幕为中像素密度。

下面是 target-densitydpi 特点的 取值规模

device-dpi –运用设备本来的 dpi 作为方针 dp。 不会发作默许缩放。
high-dpi – 运用hdpi 作为方针 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 运用mdpi作为方针 dpi。 高像素密度设备相应扩大, 像素密度设备相应缩小。 这是默许的target density.
low-dpi -运用mdpi作为方针 dpi。中等像素密度和高像素密度设备相应扩大。
<value> – 指定一个详细的dpi 值作为target dpi. 这个值的规模必须在70–400之间。
1  <!-- html document -->
2  <meta name="viewport" content="target-densitydpi=device-dpi" />
3  <meta name="viewport" content="target-densitydpi=high-dpi" />
4  <meta name="viewport" content="target-densitydpi=medium-dpi" />
5  <meta name="viewport" content="target-densitydpi=low-dpi" />
6  <meta name="viewport" content="target-densitydpi=200" />
为了避免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的规模之内。

例:

(设置屏幕宽度为设备宽度,制止用户手动调整缩放)

<meta name="viewport" content="width=device-width,user-scalable=no" />

(设置屏幕密度为高频,中频,低频主动缩放,制止用户手动调整缩放)

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

如没特别注明,文章均为伟德国际网络原创,转载请注明来自https://www.21dianpoint.com/news/1962.html