美文网首页程序员
移动端适配总结

移动端适配总结

作者: 小银 | 来源:发表于2018-03-05 00:25 被阅读0次

前景提要
以下内容根据部分文章参考 自己实践得出的猜想和总结 有错误请指正
一·概念介绍
css单位:px ,rem,em(没用过),pt,vw,%
viewport说明:参考这个
物理像素:理解成分别率
设备独立像素(css像素或者说dip):由一个或多个物理像素组成的虚拟点也是开发中设置的点 比如width:1px设置的就是这个
ppi:每英寸含有的物理像素 (300以上人肉眼看不到点)
dpr:物理像素/设备独立像素 每个移动设备都有自己的dpr (打开chrome切换到移动模式也能看到对应的dpr,window.devicePixelRatio能直接获取该值)
metaviewprot:设置布局viewport<meta name="viewprot" content="width=360">
二:理论
正常一个pc端一个页面移植到手机端可以看到页面内容很小比如一个

1.png

这里我没有设置相应的viewport可以看到内容很小 还有个现象layoutviewPort宽是980而不是真机的1080分辨率(有些手机默认有可能是800 也有别的 大部分是980),即html的宽度980

添加一个metaviewport
ps:真机设备分辨率1080*1920 dip是360
分别是

  1. <meta name="viewport" content="width=160,user-scalable=0">


    4.png

2.<meta name="viewport" content="width=360,user-scalable=0">


3.png

3.<meta name="viewport" content="width=1080,user-scalable=0">


2.png

4.<meta name="viewport" content="width=device-width,user-scalable=0">
width=device-width把layoutviewport定义跟视觉窗口一样大(即设备的可视窗口这里是360pt)不上图了...

这个实例对比可以看到没设置viewport的时候viewport的默认值是980 可以看到document.documentElement.clientWidth=980(layoutviewport 也有人叫他视口 的宽度 很多手机默认都是980)
设置了相应的width后对应的html改变了, device-width就是设备独立像素(dip360)
而且width越小看到内容越大就好像被放大了一样。

这里我是这么去想象的:
有那边一张白纸是layoutviewport(=布局窗口=html的宽度) ,你可以在白纸上画画 ,手机框(就想象成一个空壳的框)(=视觉窗口 你通过这个窗口去看那个白纸上的内容)
假设就是有一个980宽的白纸 然后你手上有个360宽的壳,一开始你透过壳可以看到整个白纸(但是字很小像图2.png)把纸改成360大小,这样你必须拿着手上的壳离这个白纸越来越近直到2个完全重合(想象下这样白纸上面的看到的东西是不是越来越大)这个时候相当于设了width=device-width或者width=360,甚至你可以改的更小 然后再靠近直到你框的宽度又跟他重合,字也是越来越大(注意这里html的with跟viewport width是一致)。

<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">


5.png

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">


6.png

<meta name="viewport" content="width=device-width,initial-scale=2,user-scalable=0">


7.png

其实这里很好理解 要initial-scale=0.5就是缩小2倍 ,还是那个画画的白纸(layoutviewportviewport)想象下你要缩小2倍自然要把白纸在原来合适的位置(白纸=360的时候,注意这里跟你设的width=device-width没关系),然后一边远离一边放大720视觉上,这样缩小后白纸的大小跟你设置width=720就是一样的,
有一点要注意 这里initial-scale计算出的白纸大小和width=xx白纸大小会取这里的大值。
比如

<meta name="viewport"  content="width=400,initial-scale=1,user-scalable=0"> 

设备独立像素(dip)=360 initial-scale=1算出的layoutviewport=360 但是width=400所以最后layoutviewport就是400

有了以上的结论再来看看minimum-scale ,maximum-scale
这么说吧initial-scale minimum-scale 以这里大的为准
initial-scale maximum-scale以这里小的值为准,
其实这个很好理解,就是最小要放大多少倍和最多放大多少倍的概念。
再来理解下
<meta name="viewport" content="width=640,initial-scale=0.5,minimum-scale=0.5,maximum-scale=2,,user-scalable=0">
scale=0.5不比0.5小也没比2大 所以合理(假设这里的device-width=320)
那我们以320再缩小2倍的视角去看(即layoutviewport=640的角度去看)width设了640 所以我们看到的应该是一个以白纸=640角度去看并且html的width=640的一个layout白纸。
那我们自己设置的css像素到底是什么呢。
请以上面的html with为准
以iphone5为准(1136x640)dpr=2 设备独立像素是dip=320
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
这里设置这个后layoutviewport=320 即html width=320
那一个css像素就是2*2 4倍的物理像素。
三:实战
3.1<meta name="viewport" content="width=device-width,initial-scale=1">
布局用百分比 flex 定宽来决定(适合一些只有简单的列表信息和详情信息的) 这样的方案简单 不过在一些大高清屏上会有大的差异化
3.2 固定宽 并用px布局

  setViewport(640)
function setViewport(uiWidth) {
    if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
        scal=window.screen.width/uiWidth;
        document.write('<meta name="viewport" content="width='+uiWidth+',initial-scale='+scal+', user-scalable=no">');

    }else{
        document.write('<meta name="viewport" content="width=640,user-scalable=no">');
    }
    
}

字体大小和布局大小完全按照设计稿来,还是大屏的看上去差异化比较大
可以试试nexus 10的
3.3使用rem

!function(n, e) {
    var t = n.documentElement,
        i = "orientationchange" in window ? "orientationchange" : "resize",
        d = function() {
         document.querySelector("html").setAttribute("data-dpr",window.devicePixelRatio)    ;
            var n = t.clientWidth;//dip
            var uiWidth=640;
            var scal=n/uiWidth;
            if (n) {
                var e = n;
                if(n>640 || n==640){
                    t.style.fontSize = '100px';
                    }else{
                    t.style.fontSize = 100 * (n / 640) + 'px';
                    }
                var htmlWidth=document.documentElement.offsetWidth;
                var allrem=1;
                document.getElementById("remw").innerHTML="width="+allrem+"rem (html font-size "+t.style.fontSize+"  htmlWidth "+htmlWidth+"   )";
                document.getElementById("remw").style.width=allrem+"rem";
            }
        };
    n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
}(document, window); 

这里1rem等100px 6.4rem等于整个宽

然后布局按设计稿来(问题是设计稿中每个px你都要自己转 应该有插件的吧 没找过知道的支个声 )
3.4使用flex 请看下面文章
手淘适配
3.5使用vw
vw没有实践过 具体看下
大漠老师的文章
postcss-px2viewport
postcss-px-to-viewport
postcss-viewport-units
viewport-units-buggyfill

相关文章

  • 前端移动端适配总结

    前端移动端适配总结

  • 移动端总结

    移动端技巧总结 对移动端开发和适配的技巧总结,主要从适配和注意事项两方面进行总结 1.媒介查询 2. 手机端加一个...

  • 移动端适配总结

    前景提要以下内容根据部分文章参考 自己实践得出的猜想和总结 有错误请指正一·概念介绍css单位:px ,rem,e...

  • 移动端适配总结

    这几周在对移动端进行屏幕适配时遇到的一些问题和解决方法记录如下: 起初是不知道有适配方案的,这点非常糟糕,身为一个...

  • 移动端适配

    移动端适配

  • 像素及适配

    移动端适配

  • 移动端适配及pc端跳转代码

    移动端rem适配 pc端跳转

  • 媒体查询适配

    公司移动端适配

  • 移动端适配

    移动端适配 dpr、DPI、PPI 视口 移动端适配的方案 微信小程序适配方案 微信小程序开发

  • 移动端rem适配

    rem适配 一、移动端适配包 1.安装移动端适配包 2.在 main.js 引入适配包 3.在 index.htm...

网友评论

    本文标题:移动端适配总结

    本文链接:https://www.haomeiwen.com/subject/nsxnxftx.html