pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

html5開發之viewport使用_html5教程技巧

html5開發之viewport使用_html5教程技巧HTML5中文學習網,是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網站、HTML5資訊、HTML5應用、HTML5游戲、HTML5教程、HTML5視頻
點評:用html5開發移動應用是最好的選擇。然而,每一款手機有不同的分辨率,不同屏幕大小,如何使我們開發出來的應用或頁面大小能適合各種高端手機使用呢

隨著高端手機(Andriod,Iphone,Ipod,WinPhone等)的盛行,移動互聯應用開發也越來越受到人們的重視,用html5開發移動應用是最好的選擇。然而,每一款手機有不同的分辨率,不同屏幕大小,如何使我們開發出來的應用或頁面大小能適合各種高端手機使用呢?學習html5 viewport的使用能幫你做到這一點……
viewport 語法介紹:


復制代碼
代碼如下:

<!-- html document -->
<meta name="viewport"
content="
height = [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] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"
/>

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之間。


復制代碼
代碼如下:

<!-- html document -->
<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-densitydpi=low-dpi" />
<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"/>


【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

主站蜘蛛池模板: 移动厕所租赁|移动卫生间|上海移动厕所租赁-家瑞租赁 | 水性绝缘漆_凡立水_绝缘漆树脂_环保绝缘漆-深圳维特利环保材料有限公司 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 铝单板_铝窗花_铝单板厂家_氟碳包柱铝单板批发价格-佛山科阳金属 | 针焰试验仪,灼热丝试验仪,漏电起痕试验仪,水平垂直燃烧试验仪 - 苏州亚诺天下仪器有限公司 | 冷镦机-多工位冷镦机-高速冷镦机厂家-温州金诺机械设备制造有限公司 | 纸张环压仪-纸张平滑度仪-杭州纸邦自动化技术有限公司 | 防腐木批发价格_深圳_惠州_东莞防腐木厂家_森源(深圳)防腐木有限公司 | 沧州友城管业有限公司-内外涂塑钢管-大口径螺旋钢管-涂塑螺旋管-保温钢管生产厂家 | 立刷【微电签pos机】-嘉联支付立刷运营中心 | QQ房产导航-免费收录优秀房地产网站_房地产信息网 | 便携式XPDM露点仪-在线式防爆露点仪-增强型烟气分析仪-约克仪器 冰雕-冰雪世界-大型冰雕展制作公司-赛北冰雕官网 | 德国EA可编程直流电源_电子负载,中国台湾固纬直流电源_交流电源-苏州展文电子科技有限公司 | 304不锈钢无缝管_不锈钢管厂家 - 隆达钢业集团有限公司 | MES系统-WMS系统-MES定制开发-制造执行MES解决方案-罗浮云计算 | 应急灯_消防应急灯_应急照明灯_应急灯厂家-大成智慧官网 | 森旺-A级防火板_石英纤维板_不燃抗菌板装饰板_医疗板 | 广州市哲铭油墨涂料有限公司,水性漆生产研发基地 | 重庆波纹管|重庆钢带管|重庆塑钢管|重庆联进管道有限公司 | 工业风机_环保空调_冷风机_工厂车间厂房通风降温设备旺成服务平台 | 书信之家_书信标准模板范文大全| 不锈钢电动球阀_气动高压闸阀_旋塞疏水调节阀_全立阀门-来自温州工业阀门巨头企业 | 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 衬四氟_衬氟储罐_四氟储罐-无锡市氟瑞特防腐科技有限公司 | 数年网路-免费在线工具您的在线工具箱-shuyear.com | 自动部分收集器,进口无油隔膜真空泵,SPME固相微萃取头-上海楚定分析仪器有限公司 | 铝合金脚手架厂家-专注高空作业平台-深圳腾达安全科技 | 章丘丰源机械有限公司 - 三叶罗茨风机,罗茨鼓风机,罗茨风机 | 固诺家居-全屋定制十大品牌_整体衣柜木门橱柜招商加盟 | 网络推广公司_网络营销方案策划_企业网络推广外包平台-上海澜推网络 | 多功能三相相位伏安表-变压器短路阻抗测试仪-上海妙定电气 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 利浦顿蒸汽发生器厂家-电蒸汽发生器/燃气蒸汽发生器_湖北利浦顿热能科技有限公司官网 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 工控机-工业平板电脑-研华工控机-研越无风扇嵌入式box工控机 | 包塑软管|金属软管|包塑金属软管-闵彬管业 | 广西资质代办_建筑资质代办_南宁资质代办理_新办、增项、升级-正明集团 | 贴片电容代理-三星电容-村田电容-风华电容-国巨电容-深圳市昂洋科技有限公司 | 布袋除尘器-单机除尘器-脉冲除尘器-泊头市兴天环保设备有限公司 布袋除尘器|除尘器设备|除尘布袋|除尘设备_诺和环保设备 | 活性氧化铝球|氧化铝干燥剂|分子筛干燥剂|氢氧化铝粉-淄博同心材料有限公司 | 电镀整流器_微弧氧化电源_高频电解电源_微弧氧化设备厂家_深圳开瑞节能 |