11月21, 2017

移动端网页布局方式

有很久没开发移动端的项目了,记得当年主流的实现方式是rem,rem和em的故事也是很多年的前端面试题了。

(之前有一年的时间是在做React Native的开发,最近大半年一直是中后台的PC端开发,RN的布局方式类似Flex,数值不带单位,没有选择综合症,偶尔开发H5活动页用的是rem)。

最近有个项目需要开发H5版的社区,不想落后于前端的潮流,来调研一下时下主流的移动端开发布局方式,818比较好的实现方式。

CSS像素与设备像素

设备像素(screen.width/height,单位是设备像素)实际上就是物理像素,衡量屏幕的分辨率实际上就是设备像素的多少,而CSS像素是一种抽象的宽度衡量。

Viewport

  • PC端的viewport
      viewport的功能是浏览器布局实现中用来约束网页中最顶级块级元素html的。
      viewport实际上等于浏览器窗口。
      document.documentElement.clientWidth/Height是viewport的大小;
      document.documentElement.offsetWidth/Height是html的大小;
    
  • 移动端的viewport
      移动端的viewport比PC端复杂,分为layout viewport和visual viewport
      - visual viewport是页面当前显示在屏幕上的部分,用户可以通过滚动来改变他所看到的页面部分,或者通过缩放来改变visual viewport的大小
      - layout viewport就是一个页面渲染之后具有固定大小的大框
      当缩放比例为100%时,layout viewport = visual viewport,当用户将页面放大时,显示在屏幕上的页面部分变化了,所以visual viewport变化了,而layout viewport的大小还是原来的大小(这里以CSS像素单位来理解)
    

总而言之设置理想视口

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

让布局视口的宽度等于理想视口的宽度,页面的初始缩放比例以及最大缩放比例都为1,且不允许用户对页面进行缩放操作。

设备像素比

公式成立的大前提:(缩放比例为1)
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
@media 媒体类型 and (视口特性阀值){
    // 满足条件的css样式代码
}

@media all and (min-width: 321px) and (max-width: 400px){
    .box{
        background: red;
    }
}

布局方式

  • px 传统PC开发将container设置为980px活1080px。当浏览器窗口缩小时,内容会被裁剪,实际上是由于viewport的原因,这种固定大小的页面在移动端的展示也不友好。

  • %百分比流式布局 流式布局实际上是百分比宽度+固定高度。浏览器宽度缩小,容器也跟着缩小,当设备屏幕较小时,体验也会好一些,但流式布局也存在问题,iPhone X和iPhone SE的屏幕大小是不一样的,虽然元素宽度是百分比的,但会存在文字换行,px单位的border-radius放大后失效,图片长宽比出现变化等问题。

  • Rem 1rem等于html元素的font-size值,根据屏幕大小动态地设置font-size的大小,rem可以实现字体等比缩放

缺点:

  • 对雪碧图不友好!移动端使用Rem如何兼顾雪碧图
  • 不够精准(尤其是一些数值换算px后存在小数的情况)
  • PC端兼容不好
  • 本来16px的字体显示已经够大,但由于使用了rem,在屏幕变大的同时,字体变大或导致翻页。

REM方案

<script>
  var scale = 1 / window.devicePixelRatio;
  document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';
 </script>

取100px的font-size,如iPhone6的设计图就是:7.5, iPhone5的设计图就是:6.4。 为什么不取1px,10px呢?计算更方便不是么?某些浏览器最低12px;

其他标签 苹果公司私有的meta标签,可以使web应用在全屏模式下运行,否则将用safari浏览器展示其内容

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

默认情况下,Safari和IOS会自动识别像手机号码的文本,这个meta标签是用来禁止这项功能的

<meta name="format-detection" content="telephone=no">

默认情况下,Android会自动识别邮箱地址

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

<meta name="format-detection" content="email=no">

参考:

Tips:哟嚯,好讨厌! []()如此的链接标签不支持链接里带有(),需用%28、%29转义。

本文链接:http://es8.es/post/移动端网页布局方式.html

-- EOF --

Comments

请在后台配置评论类型和相关的值。