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

html5 viewport使用方法示例詳解_html5教程技巧

html5 viewport使用方法示例詳解_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的范圍之內。

例:1.設置屏幕寬度為設備寬度,禁止用戶手動調整縮放


復制代碼
代碼如下:

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

2.設置屏幕密度為高頻,中頻,低頻自動縮放,禁止用戶手動調整縮放


復制代碼
代碼如下:

<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 給予處理,謝謝支持。

相關文檔推薦

互聯網時代強調用戶體驗,那什么是 HTML5 跨平臺 App 開發者的編程體驗?在經過一年的上線摸索后,APICloud 團隊認識到剝奪開發者已經習慣的開發工具,替換一個其他的是不對的。因此,
到現在為止 html5 還沒有成為國際標準,舊的瀏覽器還無法支持HTML5,所以優秀的HTML5網站示例第一個要求就是要能夠兼容舊的瀏覽器。 并且在網頁代碼中應該聲明!doctype html,然后在首頁
以手機最游戲(weibo.youxi.cn)這款 html5 手游應用為例,其在傲游MM、海豚、天天瀏覽器以及小米科技旗下的迷人瀏覽器中都表現出超出預期的運行效果。這些手機瀏覽器與蘋果Safari、谷
html走向成熟的路還有多長?到底 html5 現在能做什么,對于很多人來說還是有點迷茫。我們苦苦學的html,w3c標準都要改變么? W3C 于 2008 年 1 月 推出 HTML5 的第一份草案,而 HTML5 標準的全部
我們都知道HTML5+CSS3模板非常受到web開發人員的喜愛,目前HTML5+CSS3技術已經成為大家喜愛的前端開發技術。使用HTML5+CSS3技術,web開發人員可以創建非常時尚,非常時髦的
主站蜘蛛池模板: 哈希余氯测定仪,分光光度计,ph在线监测仪,浊度测定仪,试剂-上海京灿精密机械有限公司 | 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 六自由度平台_六自由度运动平台_三自由度摇摆台—南京全控科技 | 正压密封性测试仪-静态发色仪-导丝头柔软性测试仪-济南恒品机电技术有限公司 | 精密冲床,高速冲床等冲压设备生产商-常州晋志德压力机厂 | 天津热油泵_管道泵_天津高温热油泵-天津市金丰泰机械泵业有限公司【官方网站】 | 光栅尺厂家_数显表维修-苏州泽升精密机械 | 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 北京发电车出租-发电机租赁公司-柴油发电机厂家 - 北京明旺盛安机电设备有限公司 | 净化板-洁净板-净化板价格-净化板生产厂家-山东鸿星新材料科技股份有限公司 | 花纹铝板,合金铝卷板,阴极铝板-济南恒诚铝业有限公司 | 跨境物流_美国卡派_中大件运输_尾程派送_海外仓一件代发 - 广州环至美供应链平台 | 列管冷凝器,刮板蒸发器,外盘管反应釜厂家-无锡曼旺化工设备有限公司 | 四川成都干燥设备_回转筒干燥机_脉冲除尘器_输送设备_热风炉_成都川工星科机电设备有限公司 | 3A别墅漆/3A环保漆_广东美涂士建材股份有限公司【官网】 | 篮球架_乒乓球台_足球门_校园_竞技体育器材_厂家_价格-沧州浩然体育器材有限公司 | 酒店品牌设计-酒店vi设计-酒店标识设计【国际级】VI策划公司 | 厦门网站建设_厦门网站设计_小程序开发_网站制作公司【麦格科技】 | 氧化锆陶瓷_氧化锆陶瓷加工_氧化锆陶瓷生产厂家-康柏工业陶瓷有限公司 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 卧涛科技有限公司科技项目申报公司|高新技术企业申报|专利申请 | 千淘酒店差旅平台-中国第一家针对TMC行业的酒店资源供应平台 | 金属回收_废铜废铁回收_边角料回收_废不锈钢回收_废旧电缆线回收-广东益夫金属回收公司 | 纸张环压仪-纸张平滑度仪-杭州纸邦自动化技术有限公司 | 多米诺-多米诺世界纪录团队-多米诺世界-多米诺团队培训-多米诺公关活动-多米诺创意广告-多米诺大型表演-多米诺专业赛事 | 阳光模拟试验箱_高低温试验箱_高低温冲击试验箱_快速温变试验箱|东莞市赛思检测设备有限公司 | 江西自考网| 深圳宣传片制作_产品视频制作_深圳3D动画制作公司_深圳短视频拍摄-深圳市西典映画传媒有限公司 | 精密模具加工制造 - 富东懿| 广东风淋室_广东风淋室厂家_广东风淋室价格_广州开源_传递窗_FFU-广州开源净化科技有限公司 | SOUNDWELL 编码器|电位器|旋转编码器|可调电位器|编码开关厂家-广东升威电子制品有限公司 | 压缩空气冷冻式干燥机_吸附式干燥机_吸干机_沪盛冷干机 | cnc精密加工_数控机械加工_非标平键定制生产厂家_扬州沃佳机械有限公司 | 旋振筛_不锈钢旋振筛_气旋筛_旋振筛厂家—新乡市大汉振动机械有限公司 | 砖机托板价格|免烧砖托板|空心砖托板厂家_山东宏升砖机托板厂 | 汽车整车综合环境舱_军标砂尘_盐雾试验室试验箱-无锡苏南试验设备有限公司 | 右手官网|右手工业设计|外观设计公司|工业设计公司|产品创新设计|医疗产品结构设计|EMC产品结构设计 | 神超官网_焊接圆锯片_高速钢锯片_硬质合金锯片_浙江神超锯业制造有限公司 | Akribis直线电机_直线模组_力矩电机_直线电机平台|雅科贝思Akribis-杭州摩森机电科技有限公司 | 首页|光催化反应器_平行反应仪_光化学反应仪-北京普林塞斯科技有限公司 | 薪动-人力资源公司-灵活用工薪资代发-费用结算-残保金优化-北京秒付科技有限公司 |