您的位置:新葡亰496net > 新葡亰官网 > 挪动端常见难点管理,的消除方案

挪动端常见难点管理,的消除方案

发布时间:2019-10-01 01:04编辑:新葡亰官网浏览(62)

    再谈 Retina 下 1px 的解决方案

    2017/07/25 · CSS · 1px

    原文出处: 大漠   

    在互联网上有关于1px边框的解决方案已经有很多种了,自从使用Flexible库之后,再也没有纠结有关于1px相关的问题。由于最近在考虑新的移动端适配方案,也就是放弃Flexible库,我不得不考虑重新处理1px的方案。为此为我自己也重撸了一些1px的解决方案,整理出来,希望对有需要的同学有帮助。

    微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整

    //以下代码可使Android机页面不再受用户字体缩放强制改变大小,但是会有1S左右延时,期间可以考虑loading来处理
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
                    alert(JSON.stringify(res));
                })
            }, 0)
        });
    }else{  
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
                alert(JSON.stringify(res));
            })
        }, 0)   
    }
    
    //IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小
    body { -webkit-text-size-adjust:100%!important; }
    //最好的解决方案:最好使用rem或百分比布局
    

    再聊移动端页面的适配

    2017/08/04 · CSS · 页面适配

    原文出处: 大漠   

    前端圈真乱,这话一点不假。但乱也乱的好处,乱则生变,有变化才有进步。今天还是老调重谈,聊聊移动端页面的适配。因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话,建议你花点时间阅读完下面我扯蛋的东东。

    <meta name="apple-mobile-web-app-capable" content="yes">      

    点评:用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢

    Flexible方案

    Flexible方案已不是什么神秘的方案了,借助JavaScript来动态修改meta标签中viewport中的initial-scale的值,然后根据dpr修改html中的font-size值,再使用rem来处理。有关于这方面的详细使用可以阅读早期整理的文章《使用Flexible实现手淘H5页面的终端适配》。

    但是话说回来,这个方案目前只处理了iOS的dpr2的情况,其他的都没有处理,也就是说不支持Android和drp=3的情况。对于追求完美的同学来说,这是无法接受的。

    有问题,总是有解决方案的,有同学做过方面的详细探索。那么跟着其思路也重新撸了一回。先回到Fleible中,其实现原理,大家都知道的。让viewport放大为device-widthdpr倍数,然后缩小1/dpr倍显示。

    对于viewport的计算理论上是这样的:

    viewportwidth没设置的话,默认是980px,这方面的详细介绍可以阅读《Configuring the Viewport》一文;但如果设置了initial-scaleviewport=device-width/scale;同时还设置了widthinitial-scale,则会取min-width,即应用这两个较小的值。详细的介绍可以阅读《Preliminary meta viewport research》一文。

    接下来看看各种设备下的场景。首先使用JavaScript计算出scale的值:

    var scale = 1 / window.devicePixelRation;

    1
    var scale = 1 / window.devicePixelRation;

    head中的meta标签设备:

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

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

    iPhone5viewportwidth=640px,得到的meta值:

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

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

    符合我们预期所需的结果。

    iPhone6 Plus也是完美的:

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

    1
      <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no"/>

    再来看几个Android的设备。比如米3,它的dpr=3viewportwidth=1080,得到的值也是我们期待的:

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

    1
      <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no"/>

    在米2中,它的dpr=2viewportwidth=720,效果也是OK的。

    挪动端常见难点管理,的消除方案。<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"/>

    1
      <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"/>

    看到这里时,大家可能都会觉得完美,无需纠结啥,事实上在米2和米3中,看到的都是设置默认的浏览器、UC和Chrome浏览器的结果。回过头来再看WebView,那就出问题了。当Webview为360时,线依然也是粗的,这里测试,发现user-scalable=no会使viewport的值等于device-width。那么我们进一步去掉user-scalable=no或者设置user-scalable=yes

    <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/> <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333"/>

    1
    2
      <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>
      <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333"/>

    这样设置,在iOS、米3的Webview下都能得到预期效果,但是在米2中的Webview还是有问题,页面会被放大。问题是出在于米2的Webview的viewportwidth=490px,是由默认的980px缩放0.5后的值。而米2的device-width=360,所以就会出现撑开放不下的现象。

    米2的Webview怎么办? 想起还有个被webkit在2013年3月抛弃的属性target-densitydpi=device-dpi,此属性是之前Android对viewport标签的扩展,arget-densitydpi的值有: device-dpi, high-dpi, medium-dpi, low-dpi四个。对于小米2的Webview才出现的问题估计只能非标准的属性来hack试试,densitydpi=device-dpi会让页面按照设备本身的dpi来渲染。

    <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

    1
      <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

    测试其他都正常,就小米2的Webview会出现有些边框偶尔出现若隐若现,原来是此时页面的viewport=980,densitydpi=device-dpi以设备真实的dpi显示后,scale的倍数变为360/980,这种情况压缩下去也许就这么残了~~

    想办法让小米2的缩放比为小米的dprviewport如何能变为2*360=720呢,试试user-scalable=no重新加回去试试,终于,小米2的Webview下出现了纤细的线条。

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

    1
      <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"/>

    测试了下对iPhone系列、三星系列、华为等主流机型的影响,正常!

    别高兴的太早,在大天朝下,不仅仅有这些设备。还有VIVO之类的手机,他们的dpr=3挪动端常见难点管理,的消除方案。,他们的viewport=980px,缩小为原来的1/3后,效果就不是我们所要的了。除此之外,还有一些设备,它的dpr很变态,比如VIVO的Android4.1.2,它的dpr=1.5,而其viewport也等于980,缩小为原来的1/1.5 = 2 / 3,宽度就变成了980 * 2 / 3 = 653.333,得到的效果也是无法直视的。当然还有一些我们所不知道的设备呢?这些可以通过Device Metrics网站来查阅出设备相关的参数:

    新葡亰496net 1

    这也是当初Fleible放弃治疗Android的原因。

    但总的而言,其根本原因是一样的,viewport的默认宽度依然是980initial-scale等的设置无法改变viewport的基准计算。看来这些非主流机型上只能通过width来改变了。不出所料,设置如下即可

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

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

    进一步测试发现绝大部分Android机器用下面的vieport设置也完全可以实现1px的真实效果。但是新webkit下已经移除了对target-densitydpi=device-dpi的支持。所以主流Android还是用标准的设置上述initscale=scale,因此最后的方案是主流的设备设置viewport

    <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

    1
      <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

    设置以上viewport还是无法改变默认980为宽度的viewport的非主流设备(如vivo,云os等),设置如下:

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

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

    因此,最后的实现代码如下:

    metaEl.setAttribute('content', 'target-densitydpi=device-dpi,user-scalable=no,initial-scale=' scale ',maximum-scale=' scale ', minimum-scale=' scale); //不通过加入具体设备的白名单,通过此特征检测 docEl.clientWidth == 980 //initial-scale=1不能省,因为上面设置为其他的scale了,需要重置回来 if(docEl.clientWidth == 980) { metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1'); }

    1
    2
    3
    4
    5
    6
    metaEl.setAttribute('content', 'target-densitydpi=device-dpi,user-scalable=no,initial-scale=' scale ',maximum-scale=' scale ', minimum-scale=' scale);
    //不通过加入具体设备的白名单,通过此特征检测 docEl.clientWidth == 980
    //initial-scale=1不能省,因为上面设置为其他的scale了,需要重置回来
    if(docEl.clientWidth == 980) {
        metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1');
    }

    压缩的代码可以点击这里下载。这个也可以说是Flexible的升级版本吧(另外感兴趣的可以看看npm上的postcss-adaptive)。但也不是我所需要的方案,我的最终方案是放弃Flexible。

    如果你对上面的方案不是很满意,你可以根据这篇文章《Mobile Web: Logical Pixel vs Physical Pixel》提供的解决方案,整理出适合自己的方案。原理和前面介绍的一样。

    iPhone系列的viewport

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

    1
      <meta name="viewport" content="width=device-width initial-scale=0.5 maximum-scale=0.5 user-scalable=no"/>

    Android系列的viewport:

    <meta name="viewport" content="width=device-width target-densityDpi=device-dpi initial-scale=0.5 maximum-scale=0.5 user-scalable=no"/>

    1
      <meta name="viewport" content="width=device-width target-densityDpi=device-dpi initial-scale=0.5 maximum-scale=0.5 user-scalable=no"/>

    同样为了达到上述的需求,通过JavaScript来处理:

    if (window.devicePixelRatio === 1) { if (window.innerWidth === 2 * screen.width || window.innerWidth === 2 * screen.height) { el = document.getElementById('viewport'); el.setAttribute('content', 'width=device-width target-densityDpi=device-dpi ' 'initial-scale=1 maximum-scale=1 user-scalable=no'); document.head.appendChild(el); width = window.innerWidth; height = window.innerHeight; if (width === 2 * screen.width) { width /= 2; height /= 2; } } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    if (window.devicePixelRatio === 1) {
        if (window.innerWidth === 2 * screen.width ||
            window.innerWidth === 2 * screen.height) {
            el = document.getElementById('viewport');
            el.setAttribute('content', 'width=device-width target-densityDpi=device-dpi '
                'initial-scale=1 maximum-scale=1 user-scalable=no');
            document.head.appendChild(el);
            width = window.innerWidth;
            height = window.innerHeight;
            if (width === 2 * screen.width) {
                width /= 2;
                height /= 2;
            }
        }
    }

    是不是感觉他们非常类似。感兴趣不仿试试。

    屏幕旋转的事件和样式

    function orientInit(){
        var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
        if(orientChk =='lapdscape'){
            //这里是横屏下需要执行的事件
        }else{
            //这里是竖屏下需要执行的事件
        }
    }
    orientInit();
    window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
        setTimeout(orientInit, 100);
    },false)
    //CSS处理
    //竖屏时样式
    @media all and (orientation:portrait){   }
    //横屏时样式
    @media all and (orientation:landscape){   }
    

    Flexible承载的使命

    Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题。而这套方案也相对而言是一个较为成熟的方案。简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段来根据设备的dpr值相应改变`标签中viewport`的值:

    !-- dpr = 1--> <meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no"/><!-- dpr = 2--><meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"/><!-- dpr = 3--><meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no"

    1
    2
    !-- dpr = 1-->
    <meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no"/><!-- dpr = 2--><meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"/><!-- dpr = 3--><meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no"

    从而让页面达么缩放的效果,也变相的实现页面的适配功能。而其主要的思想有三点:

    • 根据dpr的值来修改viewport实现1px的线
    • 根据dpr的值来修改htmlfont-size,从而使用rem实现等比缩放
    • 使用Hack手段用rem模拟vw特性

    有关于Flexible方案实现适配,在2015年双十一之后做过这方面的技术文档分享,感兴趣的同学可以移步阅读《使用Flexible实现手淘H5页面的终端适配》一文。虽然Flexible解决了适配终端很多问题,但它并不是万能的,也不是最优秀的,他还是存在一些问题的,比如iframe的引用,有时候就把我们自己给埋进去了。针对其中的一些不足之处,有些同学对其进行过相关的改造,在网上搜索能找到相关的方案。

    那么时代在变化,前端技术在不断的变化,试问:Flexible还是最佳方案?Flexible还有存在的必要吗? 最近一直在探讨这方面,这里先告诉大家Flexible已经完成了他自身的历史使命,我们可以放下Flexible,拥抱新的变化。接下来的内容,我将分享一下我最近自己探讨的新的适配方案,或许很多团队同学已经开始使用了,如果有不对之处,希望能得到大婶们的指正;如果您有更好的方案,希望能一起分享一起探讨。

    这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5 viewport的使用能帮你做到这一点……
    viewport 语法介绍:

    .5px方案

    2014年的WWDC大会中,Ted O’Conor在分享“设计响应的Web体验” 主题时提到关于Retina Hairlines一词,也就是Retina极细的线:

    在Retina屏上仅仅显示1物理像素的边框,开发者应该如何处理呢?

    实际上其想表达的是iOS8下1px边框的解决方案。1px的边框在devicePixelRatio = 2的Retina屏下会显示成2px,在iPhone6 Plus下甚至会显示成3px

    还好,时代总是进步的,在iOS8下,苹果系列都已经支持0.5px了,那么意味着在devicePixelRatio = 2时,我们可以借助媒体查询来处理:

    .border { border: 1px solid black; } @media (-webkit-min-device-pixel-ratio: 2) { .border { border-width: 0.5px } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .border {
        border: 1px solid black;
    }
     
    @media (-webkit-min-device-pixel-ratio: 2) {
        .border {
            border-width: 0.5px
        }
    }

    但在iOS7以下和Android等其他系统里,0.5px将会被显示为0px,那么我们就需要想出办法解决,说实在一点就是找到Hack。

    首先我们可以通过JavaScript来判断UA,如果是iOS8 ,则输出类名hairlines,为了防止重绘,把这段代码添加在``之前:

    if (/iP(hone|od|ad)/.test(navigator.userAgent)) { var v = (navigator.appVersion).match(/OS (d )_(d )_?(d )?/), version = parseInt(v[1], 10); if(version >= 8){ document.documentElement.classList.add('hairlines') } }

    1
    2
    3
    4
    5
    6
    7
    if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
        var v = (navigator.appVersion).match(/OS (d )_(d )_?(d )?/),
            version = parseInt(v[1], 10);
        if(version >= 8){
            document.documentElement.classList.add('hairlines')
        }
    }

    除了判读UA之外,还可以通过JavaScript来判断是否支持0.5px边框,如果支持的话,同样输出类名hairlines

    if (window.devicePixelRatio && devicePixelRatio >= 2) { var testElem = document.createElement('div'); testElem.style.border = '.5px solid transparent'; document.body.appendChild(testElem); if (testElem.offsetHeight == 1){ document.querySelector('html').classList.add('hairlines'); } document.body.removeChild(testElem); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    if (window.devicePixelRatio && devicePixelRatio >= 2) {
        var testElem = document.createElement('div');
        testElem.style.border = '.5px solid transparent';
        document.body.appendChild(testElem);
        if (testElem.offsetHeight == 1){
            document.querySelector('html').classList.add('hairlines');
        }
        document.body.removeChild(testElem);
    }

    相比于第一种方法,这种方法的可靠性更高一些,但是需要把JavaScript放在body标签内,相对来说会有一些重绘,个人建议是用第一种方法。

    这个方案无法兼容iOS8以下和Android的设备。如果需要完美的兼容,可以考虑和方案一结合在一起处理。只是比较蛋疼。当然除了和Flexible方案结合在一起之外,还可以考虑和下面的方案结合在一起使用。

    audio元素和video元素在ios和andriod中无法自动播放

    1.<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
    2.<audio controls="controls"> 
        <source src="music/bg.ogg" type="audio/ogg"></source>
        <source src="music/bg.mp3" type="audio/mpeg"></source>
        优先播放音乐bg.ogg,不支持在播放bg.mp3
    </audio>
    //JS绑定自动播放(操作window时,播放音乐)
    $(window).one('touchstart', function(){
        music.play();
    })
    //微信下兼容处理
    document.addEventListener("WeixinJSBridgeReady", function () {
        music.play();
    }, false);
    //小结
    //1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常
    //2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间
    

    先上菜,再唠嗑

    先上个二维码:

    新葡亰496net 2

    你可以使用手淘App、优酷APP、各终端自带的浏览器、UC浏览器、QQ浏览器、Safari浏览器和Chrome浏览器扫描上面的二维码,您看到相应的效果:

    新葡亰496net 3新葡亰496net 4

    iPhone系列效果

    新葡亰496net 5

    部分Android效果

    注:如果扫上面的二维码没有任何效果,你可以点击这里,打开在线页面,重新生成你的设备能识别的二维码号 。

    上面的Demo,测试了Top30的机型。目前未得到支持的:

    TOP值 品牌 型号 系统版本 分辨率 屏幕尺寸 手淘APP 优酷APP 原生浏览器 QQ浏览器 UC浏览器 Chrome浏览器
    13 华为 Mate9 Android7.0 1080 x 1920 5英寸 Yes Yes No Yes Yes Yes
    23 华为 Mate7 Android4.2 1080 x 1920 5.2英寸 Yes Yes No Yes Yes Yes
    25 魅族 Mx4 (M460 移动4G) Android4.4.2 1152 x 1920 5.36英寸 Yes No No Yes Yes Yes
    28 Oppo R7007 Android4.3 1280 x 720 5英寸 Yes No No Yes Yes No
    29 三星 N9008 (Galaxy Note3) Android4.4.2 1080 x 1920 5.7英寸 Yes No Yes Yes Yes Yes
    30 华硕 ZenFone5(x86) Android4.3 720 x 280 5英寸 No No No Yes No No

    Top30机型中不在列表中的,将看到的效果如上图所示。至于敢不敢用,这就得看亲了。必竟第一个吃螃蟹的人是需要一定的勇气!(^_^)

    WebApp全屏模式   隐藏地址栏。

    代码如下:

    border-image

    border-image是一个很神奇的属性,Web开发人员借助border-image的九宫格特性,可以很好的运用到解决1px边框中。使用border-image解决1px咱们需要一个特定的图片,这张图片要符合你的要求,不过它长得像下图:新葡亰496net 6

     

    实际使用的时候:

    border-width: 0 0 1px 0; border-image: url(linenew.png) 0 0 2 0 stretch;

    1
    2
    border-width: 0 0 1px 0;
    border-image: url(linenew.png) 0 0 2 0 stretch;

    上面的效果也仅实现了底部边框border-bottom1px的效果。之所以使用的图片是2px的高,上部分的1px颜色为透明,下部分的1px使用的视觉规定的border颜色。但如果我们边框底部和顶部都需要border时,需要做一下图片的调整:

    新葡亰496net 7

    border-width: 1px 0; border-image: url(linenew.png) 2 0 stretch;

    1
    2
    border-width: 1px 0;
    border-image: url(linenew.png) 2 0 stretch;

    到目前为止,我们已经能在iPhone上展现1px边框的效果。但是我们也发现这样的方法在非视网膜屏幕上会出现border不显示的现象。为了解决这个问题,可以借助媒体查询来处理:

    .border-image-1px { border-bottom: 1px solid #666; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .border-image-1px { border-bottom: none; border-width: 0 0 1px 0; border-image: url(../img/linenew.png) 0 0 2 0 stretch; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .border-image-1px {
        border-bottom: 1px solid #666;
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .border-image-1px {
            border-bottom: none;
            border-width: 0 0 1px 0;
            border-image: url(../img/linenew.png) 0 0 2 0 stretch;
        }
    }

    不管是只有一边的边框(比如示例中的底部边框),还是上下都有边框,我们都需要对图片做相应的处理,除些之外,如果边框的颜色做了变化,那么也需要对图片做处理。这样也不是一个很好的解决方案。

    重力感应事件

    // 运用HTML5的deviceMotion,调用重力感应事件
    if(window.DeviceMotionEvent){
        document.addEventListener('devicemotion', deviceMotionHandler, false)
    }
    var speed = 30;
    var x = y = z = lastX = lastY = lastZ = 0;
    function deviceMotionHandler(eventData){
        var acceleration = event.accelerationIncludingGravity;
        x = acceleration.x;
        y = acceleration.y; 
        z = acceleration.z;
        if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
            //这里是摇动后要执行的方法 
            yaoAfter();
        }
        lastX = x;
        lastY = y;
        lastZ = z;
    }
    function yaoAfter(){
        //do something
    }
    

    适配方案

    前面给大家介绍了这个方案目前得到的支持情况以及效果。也扯了不少废话,接下来进入正题吧。

    在移动端布局,我们需要面对两个最为重要的问题:

    • 各终端下的适配问题
    • Retina屏的细节处理

    不同的终端,我们面对的屏幕分辨率、DPR、1px2x图等一系列的问题。那么这个布局方案也是针对性的解决这些问题,只不过解决这些问题不再是使用Hack手段来处理,而是直接使用原生的CSS技术来处理的。

    <meta name=”apple-mobile-web-app-status-bar-style” content=black” />

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

    PostCSS Write SVG

    使用border-image每次都要去调整图片,总是需要成本的。基于上述的原因,我们可以借助于PostCSS的插件postcss-write-svg来帮助我们。如果你的项目中已经有使用PostCSS,那么只需要在项目中安装这个插件。然后在你的代码中使用:

    @svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } } .example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @svg 1px-border {
        height: 2px;
        @rect {
            fill: var(--color, black);
            width: 100%;
            height: 50%;
        }
    }
     
    .example {
        border: 1px solid transparent;
        border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
    }

    这样PostCSS会自动帮你把CSS编译出来:

    .example { border: 1px solid transparent; border-image: url("data:image/svg xml;charset=utf-8,") 2 2 stretch; }

    1
    2
    3
    4
    .example {
        border: 1px solid transparent;
        border-image: url("data:image/svg xml;charset=utf-8,") 2 2 stretch;
    }

    使用PostCSS的插件是不是比我们修改图片要来得简单与方便。

    使用PostCSS的postcss-write-svg插件,除了可以使用border-image来实现1px的边框效果之外,还可以使用background-image来实现。比如:

    @svg square { @rect { fill: var(--color, black); width: 100%; height: 100%; } } #example { background: white svg(square param(--color #00b1ff)); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @svg square {
        @rect {
            fill: var(--color, black);
            width: 100%;
            height: 100%;
        }
    }
     
    #example {
        background: white svg(square param(--color #00b1ff));
    }

    编译出来就是:

    #example { background: white url("data:image/svg xml;charset=utf-8,"); }

    1
    2
    3
    #example {
        background: white url("data:image/svg xml;charset=utf-8,");
    }

    这个方案简单易用,是我所需要的。目前测试下来,基本能达到我所需要的需求,在最新的适配方案中,我也采用了这个插件来处理1px边框的问题。

    除此之外网友还整理了一些其他的方案,比如说:background-imagebox-shadowtransform之类的。

    其中box-shadow不推荐使用,而background-image和上面的PostCSS方案有点类似,只不过PostCSS更为方便,实在无耐之下,transform和伪元素或者伪类的配合还是可以值得一用的。比如:

    .hairlines li{ position: relative; border:none; } .hairlines li:after{ content: ''; position: absolute; left: 0; background: #000; width: 100%; height: 1px; transform: scaleY(0.5); transform-origin: 0 0; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .hairlines li{
        position: relative;
        border:none;
    }
    .hairlines li:after{
        content: '';
        position: absolute;
        left: 0;
        background: #000;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 0 0;
    }

    使用的时候,也需要结合JavaScript代码,用来判断是否是Retina屏。当然除了JavaScript来判断之外,你还可以借助于媒体查询来处理。

    开启硬件加速

    .css {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    

    适配终端

    首要解决的是适配终端。回想一下,以前的Flexible方案是通过JavaScript来模拟vw的特性,那么到今天为止,vw已经得到了众多浏览器的支持,也就是说,可以直接考虑将vw单位运用于我们的适配布局中。

    众所周知,vw是基于Viewport视窗的长度单位,这里的视窗(Viewport)指的就是浏览器可视化的区域,而这个可视区域是window.innerWidth/window.innerHeight的大小。用下图简单的来示意一下:

    新葡亰496net 8

     

    因为Viewport涉及到的知识点很多,要介绍清楚这方面的知识,都需要几篇文章来进行阐述。@PPK大神有两篇文章详细介绍了这方面的知识。中文可以移步这里进行阅读。

    在CSS Values and Units Module Level 3中和Viewport相关的单位有四个,分别为vwvhvminvmax

    • vw:是Viewport’s width的简写,1vw等于window.innerWidth1%
    • vh:和vw类似,是Viewport’s height的简写,1vh等于window.innerHeihgt1%
    • vminvmin的值是当前vwvh中较小的值
    • vmaxvmax的值是当前vwvh中较大的值

    vminvmax是根据Viewport中长度偏大的那个维度值计算出来的,如果window.innerHeight > window.innerWidthvmin取百分之一的window.innerWidthvmax取百分之一的window.innerHeight计算。

    还是用一张图来示意吧,一图胜于千言万语:

    新葡亰496net 9

    所以在这个方案中大胆的使用vw来替代以前Flexible中的rem缩放方案。先来回归到我们的实际业务中来。目前出视觉设计稿,我们都是使用750px宽度的,从上面的原理来看,那么100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。看到这里,很多同学开始感到崩溃,又要计算,能不能简便一点,能不能再简单一点,其实是可以的,我们可以使用PostCSS的插件postcss-px-to-viewport,让我们可以直接在代码中写px,比如:

    [w-369]{ width: 369px; } [w-369] h2 span { background: #FF5000; color: #fff; display: inline-block; border-radius: 4px; font-size: 20px; text-shadow: 0 2px 2px #FF5000; padding: 2px 5px; margin-right: 5px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    [w-369]{
        width: 369px;
    }
     
    [w-369] h2 span {
        background: #FF5000;
        color: #fff;
        display: inline-block;
        border-radius: 4px;
        font-size: 20px;
        text-shadow: 0 2px 2px #FF5000;
        padding: 2px 5px;
        margin-right: 5px;
    }

    PostCSS编译之后就是我们所需要的带vw代码:

    [w-369] { width: 49.2vw; } [w-369] h2 span { background: #ff5000; color: #fff; display: inline-block; border-radius: .53333vw; text-shadow: 0 0.26667vw 0.26667vw #ff5000; padding: .26667vw .66667vw; } [w-369] h2 span, [w-369] i { font-size: 2.66667vw; margin-right: .66667vw; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    [w-369] {
        width: 49.2vw;
    }
    [w-369] h2 span {
        background: #ff5000;
        color: #fff;
        display: inline-block;
        border-radius: .53333vw;
        text-shadow: 0 0.26667vw 0.26667vw #ff5000;
        padding: .26667vw .66667vw;
    }
    [w-369] h2 span,
    [w-369] i {
        font-size: 2.66667vw;
        margin-right: .66667vw;
    }

    在实际使用的时候,你可以对该插件进行相关的参数配置:

    "postcss-px-to-viewport": { viewportWidth: 750, viewportHeight: 1334, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    "postcss-px-to-viewport": {
        viewportWidth: 750,
        viewportHeight: 1334,
        unitPrecision: 5,
        viewportUnit: 'vw',
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false
    }

    假设你的设计稿不是750px而是1125px,那么你就可以修改vewportWidth的值。有关于该插件的详细介绍,可以阅读其官方使用文档。

    上面解决了pxvw的转换计算。那么在哪些地方可以使用vw来适配我们的页面。根据相关的测试:

    • 容器适配,可以使用vw
    • 文本的适配,可以使用vw
    • 大于1px的边框、圆角、阴影都可以使用vw
    • 内距和外距,可以使用vw

    另外有一个细节需要特别的提出,比如我们有一个这样的设计:

    新葡亰496net 10

    如果我们直接使用:

    [w-188-246] { width: 188px; } [w-187-246]{ width: 187px }

    1
    2
    3
    4
    5
    6
    [w-188-246] {
        width: 188px;
    }
    [w-187-246]{
        width: 187px
    }

    最终的效果会造成[w-187-246]容器的高度小于[w-188-246]容器的高度。这个时候我们就需要考虑到容器的长宽比缩放。这方面的方案很多,但我还是推荐工具化来处理,这里推荐@一丝 姐姐写的一个PostCSS插件postcss-aspect-ratio-mini。这个插件使用很简单,不需要做任何的配置,你只需要本地安装一下就OK。使用的时候如下:

    [aspectratio] { position: relative; } [aspectratio]::before { content: ''; display: block; width: 1px; margin-left: -1px; height: 0; } [aspectratio-content] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } [aspectratio][aspect-ratio="188/246"]{ aspect-ratio: '188:246'; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    [aspectratio] {
        position: relative;
    }
    [aspectratio]::before {
        content: '';
        display: block;
        width: 1px;
        margin-left: -1px;
        height: 0;
    }
     
    [aspectratio-content] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    [aspectratio][aspect-ratio="188/246"]{
        aspect-ratio: '188:246';
    }

    编译出来:

    [aspectratio][aspect-ratio="188/246"]:before { padding-top: 130.85106382978725%; }

    1
    2
    3
    [aspectratio][aspect-ratio="188/246"]:before {
        padding-top: 130.85106382978725%;
    }

    这样就可以完美的实现长宽比的效果。有关于这方面的原理在这里不做过多阐述,感兴趣的话可以阅读早前整理的文章:

    • CSS实现长宽比的几种方案
    • 容器长宽比
    • Web中如何实现纵横比
    • 实现精准的流体排版原理

    目前采用PostCSS插件只是一个过渡阶段,在将来我们可以直接在CSS中使用aspect-ratio属性来实现长宽比。

    默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
    注意: 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

    width
    控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

    总结

    不管是哪种方案,对于解决同样的问题,只要是能解决都是好方案。俗话说:“不管是白猫还是黑猫,能捉到老鼠都是好猫”。上面罗列了众多1px边框的解决方案,可以说没有最好的,只有最适合的。大家可以根据自己的需求来处理,个人更建议大家使用PostCSS的插件。能让你省不少的事情。

    新葡亰496net 11

    消除transition闪屏

    .css {
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }```
    ####JS判断微信浏览器
    

    function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=='micromessenger'){
    return true;
    }else{
    return false;
    }
    }

    ####播放视频不全屏
    

    播放视频不全屏
    webkit-playsinline="true"
    <video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src=";

    ####H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
    

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // width 设置viewport宽度,为一个正整数,或字符串‘device-width’
    // height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
    // initial-scale 默认缩放比例,为一个数字,可以带小数
    // minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
    // maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
    // user-scalable 是否允许手动缩放
    //二、JS动态判断
    var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth/640;
    var ua = navigator.userAgent;
    if (/Android (d .d )/.test(ua)){
    var version = parseFloat(RegExp.$1);
    if(version>2.3){
    document.write('<meta name="viewport" content="width=640, minimum-scale = ' phoneScale ', maximum-scale = ' phoneScale ', target-densitydpi=device-dpi">');
    }else{
    document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
    }
    } else {
    document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
    }

    ####移动端滚动条优化
    

    //隐藏滚动条
    margin-right: -20px;
    padding-right: 20px;

    ::-webkit-scrollbar{ display: none }

    //ios 下使其滚动平滑
    -webkit-overflow-scrolling: touch

    ####移动端分享 
    
    手Q支持声明meta标签的的分享方式,例如:
    ![2015032701310431-590x96.png](http://upload-images.jianshu.io/upload_images/1373016-3416a1fe6ebae1c0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)
    
    一般化分享
    在默认兼容旧版微信、手Q或者各种浏览器,平台,可以用这样的方法:
    写h1做标题,p做内容,img做缩略图,只需要把h1隐藏掉就好,这里的缩略图最好为300x300px。
    ![20150327013103323.png](http://upload-images.jianshu.io/upload_images/1373016-f8c6e98c50a4a5a8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)
    

    解决1px方案

    前面提到过,对于1px是不建议将其转换成对应的vw单位的,但在Retina下,我们始终是需要面对如何解决1px的问题。在《再谈Retina下1px的解决方案》文章中提供了多种解决1px的方案。在这里的话,个人推荐另外一种解决1px的方案。依旧是使用PostCSS插件,解决1px可以使用postcss-write-svg。

    使用postcss-write-svg你可以通过border-image或者background-image两种方式来处理。比如:

    @svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } } .example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @svg 1px-border {
        height: 2px;
        @rect {
            fill: var(--color, black);
            width: 100%;
            height: 50%;
        }
    }
    .example {
        border: 1px solid transparent;
        border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
    }

    这样PostCSS会自动帮你把CSS编译出来:

    .example { border: 1px solid transparent; border-image: url("data:image/svg xml;charset=utf-8,") 2 2 stretch; }

    1
    2
    3
    4
    .example {
        border: 1px solid transparent;
        border-image: url("data:image/svg xml;charset=utf-8,") 2 2 stretch;
    }

    使用PostCSS的插件是不是比我们修改图片要来得简单与方便。

    上面演示的是使用border-image方式,除此之外还可以使用background-image来实现。比如:

    @svg square { @rect { fill: var(--color, black); width: 100%; height: 100%; } } #example { background: white svg(square param(--color #00b1ff)); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @svg square {
        @rect {
            fill: var(--color, black);
            width: 100%;
            height: 100%;
        }
    }
     
    #example {
        background: white svg(square param(--color #00b1ff));
    }

    编译出来就是:

    #example { background: white url("data:image/svg xml;charset=utf-8,"); }

    1
    2
    3
    #example {
        background: white url("data:image/svg xml;charset=utf-8,");
    }

    这个方案简单易用,是我所需要的。目前测试下来,基本能达到我所需要的需求。但有一点千万别忘了,记得在``中添加:

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

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

    上面阐述的是这个适配方案中所用到的技术点,简单的总结一下:

    • 使用vw来实现页面的适配,并且通过PostCSS的插件postcss-px-to-viewport把px转换成vw。这样的好处是,我们在撸码的时候,不需要进行任何的计算,你只需要根据设计图写px单位
    • 为了更好的实现长宽比,特别是针对于imgvedioiframe元素,通过PostCSS插件postcss-aspect-ratio-mini来实现,在实际使用中,只需要把对应的宽和高写进去即可
    • 为了解决1px的问题,使用PostCSS插件postcss-write-svg,自动生成border-image或者background-image的图片

    这里使用了多个PostCSS的插件,其实现在有很多优秀的PostCSS插件能帮助我们解决很多问题。哪果你从未接触过有关于PostCSS相关的知识,建议你可以花点时间去学习一下,在W3cplus提供了一些有关于PostCSS相关的文章。如果你想系统的学习PostCSS相关的知识,推荐你购买《深入PostCSS Web设计》一书:

    新葡亰496net 12

     

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

    大漠

    常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

    如需转载,烦请注明出处:https://www.w3cplus.com/css/fix-1px-for-retina.html

    1 赞 5 收藏 评论

    新葡亰496net 13

    降级处理

    最开始提到过,到目前为止,T30的机型中还有几款机型是不支持vw的适配方案。那么如果业务需要,应该怎么处理呢?有两种方式可以进行降级处理:

    • CSS Houdini:通过CSS Houdini针对vw新葡亰496net,做处理,调用CSS Typed OM Level1 提供的CSSUnitValue API。
    • CSS Polyfill:通过相应的Polyfill做相应的处理,目前针对于vw单位的Polyfill主要有:vminpoly、Viewport Units Buggyfill、vunits.js和Modernizr。个人推荐采用Viewport Units Buggyfill

    <meta http-equiv="X-UA-Compatible" content="IE=edge">   是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页  告诉IE使用最新的引擎渲染网页( 以最高级别的可用模式显示内容)

    target-densitydpi
    一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

    Viewport不足之处

    采用vw来做适配处理并不是只有好处没有任何缺点。有一些细节之处还是存在一定的缺陷的。比如当容器使用vw单位,margin采用px单位时,很容易造成整体宽度超过100vw,从而影响布局效果。对于类似这样的现象,我们可以采用相关的技术进行规避。比如将margin换成padding,并且配合box-sizing。只不过这不是最佳方案,随着将来浏览器或者应用自身的Webview对calc()函数的支持之后,碰到vwpx混合使用的时候,可以结合calc()函数一起使用,这样就可以完美的解决。

    另外一点,px转换成vw单位,多少还会存在一定的像素差,毕竟很多时候无法完全整除。

    到目前为止,我发现的两个不足之处。或许在后面的使用当中,还会碰到一些其他不为人之的坑。事实也是如此,不管任何方案,踩得坑越多,该方案也越来越强大。希望喜欢这个适配方案的同学和我一起踩坑,让其更为完善。

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    下面是 target-densitydpi 属性的 取值范围

    如何判断自己的应用是否支持

    虽然该文的示例,进行了多方面的测试。但很多同学还是会担忧自己的APP应用是否支持该方案,而不敢大胆尝试或者使用。其实不必要这么担心,你可以拿自己的设备,或者应用扫描下面的二维码:

    新葡亰496net 14

    当页面跑完测试之后,找到对应的Values and Units列表项:

    新葡亰496net 15

    如果vw栏是绿色代表你的设备或应用支持该方案;反之则不支持。另外你也可以经常关注css3test相关的更新,后面将会根据相关的规范更新测试代码,让你能快速掌握哪些属性可以大胆使用。

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

    device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
    high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
    medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
    low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
    <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

    总结

    H5页面的适配方案总是令人蛋疼的,事实上页面的布局总是令人蛋疼的。但技术是不断革新的,我们可以随着保持对新技术的关注,尝试这些新特性运用到实际项目中,只有这样,我们解决问题的方案才会越来越完善。

    到写这篇文章为止,虽然还有那么一两款机型不支持vw,但并不影响我们去使用。只有不断去尝试,才会有进步。在此,希望大家大胆尝试,一起让该方案变得更完美。如果你有更好的建议,或者你踩到任何坑,欢迎在下面的评论中与我分享,或者发邮件给我一起讨论。

    1 赞 3 收藏 评论

    新葡亰496net 16

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

    代码如下:

     

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

    width - viewport的宽度 height - viewport的高度
    initial-scale - 初始的缩放比例
    minimum-scale - 允许用户缩放到的最小比例
    maximum-scale - 允许用户缩放到的最大比例
    user-scalable - 用户是否可以手动缩放
    

    为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放,你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了,页面将不会缩放。相反,页面会根据当前屏幕的像素密度进行展示。在这种情形下,你还需要将viewport的width定义为与设备的width匹配,这样你的页面就可以和屏幕相适应。

    具体的viewport解释看下面===========>

    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的范围之内。

    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 相对应,指定高度。

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

    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倍。

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

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

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:挪动端常见难点管理,的消除方案

    关键词: