html5在移动端的屏幕适应性问题

Html5 以前是最最炙手可热的技术。移动端也由于html5技术的增加变得更加变通一些。人人都喜欢“Write once。run more”,但在今年扎克伯格承认在html5上的失策以来,我们也应该清醒的认识到html5作为一种新兴技术,还有很多不完好的地方。比方html5 的效率问题。这足以让众多程序猿们无力吐槽,消费者们也会无法忍受。但不可否认的是html5给我们带来给好的web技术,它是未来发展的趋势,而且不是 终点,我们可以做的就是更加努力的完好它,写出更好,更有效率的代码。



       好了,说了这么多废话,如今開始进入主题,android的适配问题是最让android程序猿头疼的问题。大家为此也是八仙过海,各显神通啊,但在 html5这里我们能够更好的解决这项问题。

手机浏览器是把页面放在一个虚拟的“窗体”(viewport)中。通常这个虚拟的“窗体” (viewport)比屏幕宽,这样就不用把每一个网页挤到非常小的窗体中(这样会破坏没有针对手机浏览器优化的网页的布局),用户能够通过平移和缩放来看网 页的不同部分。经常使用的viewport布局为:<meta name="viewport"
content="width=device-width,user-scalable=no" />



详细的含义是:

width:控制 viewport 的大小,能够指定的一个值,假设 600。或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素),默认的虚拟窗体为980像素宽(眼下大部分站点的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。



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

<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:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

maximum-scale:同意用户缩放到的最大比例,范围从0到10.0。

minimum-scale:同意用户缩放到的最小比例。范围从0到10.0。

user-scalable:用户能否够手动缩放,值能够是:①yes、 true同意用户缩放。②no、false不同意用户缩放,假设你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,由于根本不可能缩放。





全部的缩放值都必须在0.01–10的范围之内。

将这些属性设置之后放入html5 的meta属性中,就可以对手机屏幕进行适应。例:

[mw_shl_code=xhtml,true]<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]

    "

/>[/mw_shl_code]

以下是两个实际使用的样例:

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

<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"/>

html5在移动端的屏幕适应性问题的更多相关文章

  1. HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>

    网页手机wap2.0网页的head里加入下面这条元标签,在移动端的浏览器中页面将以原始大小显示,并不允许缩放. 加入 如下代码 即可自适应移动端的屏幕: <meta name="vie ...

  2. 7种方法解决移动端Retina屏幕1px边框问题

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  3. 7种方法实现移动端Retina屏幕1px边框效果

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  4. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  5. html5实现移动端下拉刷新(原理和代码)

    这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功 ...

  6. HTML5与移动端web学习笔记

    HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 ...

  7. HTML5与移动端Web

    概述 HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播 ...

  8. html5 meta(移动端)介绍及使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  9. 【小月博客】 Html5 上传图片 移动端、PC端通用

    在博客园注册账号有些天了,感觉有些许欣慰,自己写的东西有人在看,有人在评论很是开心.(ps: 满足一下虚荣心吧!) 废话不多说了,说一下今天给大家分享的是 html5上传图片.我们是在移动端使用的,但 ...

随机推荐

  1. 【动态规划】Gym - 101147H - Commandos

    裸dp,看代码. #include<cstdio> #include<algorithm> #include<cstring> using namespace st ...

  2. Swift中获取相册图片与保存到相册

    关于这个网上目前位置记录的资料比较少,记录一下这个坑 获取相册图片 1: var iPC = UIImagePickerController() 2: iPC.sourceType = UIImage ...

  3. BlockTransferService 实现

    spark的block管理是通过BlockTransferService定义的方法从远端获取block.将block存储到远程节点.shuffleclient生成过程就会引入blockTransfer ...

  4. Jetty错误: badMessage: java.lang.IllegalStateException: too much data after closed for HttpChannelOverHttp@472adad9{r=2,c=false,a=IDLE,uri=}

    最近用Jetty跑Spring MVC接收POST请求(POST中数据很大).出现数据无法获取到的问题.如: @RequestMapping(value = "/receive", ...

  5. NHibernate官方文档中文版——持久化类(Persistent Classes)

    持久化类是一个应用程序中的类,主要用来实现业务逻辑(例如,在电商应用中的客户和订单类).持久化类,就像它的名字一样,生命周期短暂并且用来持久化的据库对象实例. 如果这些类的构造能够依照一些简单的原则, ...

  6. centos 7.3systemctl工具

    http://www.cnblogs.com/tswcypy/p/4479153.html

  7. 客户端连接Redis

    首先下载Jedis http://mvnrepository.com/artifact/redis.clients/jedis 然后脚本如下: package redistest; import ja ...

  8. 【AS3 Coder】任务九:游戏新手引导的制作原理(下)

    在上一篇教程中,我们了解了一套我自创的新手引导管理框架的使用原理,那么在本篇教程中,我们将考虑新手引导制作中可能遇到的一些棘手问题及探讨其解决方案.Are you ready my baby? Let ...

  9. 【Hadoop】用 Ganglia 监控hadoop集群

    随着数据中心的增长和管理人员的缩减,对计算资源使用有效监视工具的需求变得比以往更加迫切.术语监视 在应用到数据中心时可能会让人混淆,因为它的含义会根据具体的说话者和听众而有所不同.例如: 在集群中运行 ...

  10. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何配置虚拟轴 TC2

    右击NC- Configuration,然后Append Task,然后右击Axis,Append Axis   轴的类型可以分为:Continuous Axis,默认的类型,NC可以连续闭环控制该轴 ...