15 移动端布局及解决方案

15 移动端布局及解决方案

移动端项目

移动端浏览器及内核分析

• 手机浏览器种类：

  UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器， 搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器。

  国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助 研发的内核，就像国内的手机操作系统都是基于Android修改的。

viewport

• width:设置viewport的宽度（即之前所提及到的，浏览器的宽度），这里可以为 一个整数，又或者是字符串〃device-width〃。

• initial-scale:页面初始的缩放值，为数字，可以是小数。

• minimum-scale:允许用户的最小缩放值，为数字，可以是小数。

• maximum-scale:允许用户的最大缩放值，为数字，可以是小数。

• height:设置viewport的高度（我们一般不用）。

• user-scalable:是否允许用户进行缩放，’ no’ 为不允许，’ yes’为允许我们把 这个标签设在head里面。

移动端布局解决方案

• 固定布局

  • 在＜head＞里把viewport加好，跟pc端一样，设想整个网页的宽度为750px居中即可， 超出部分留白。

    优点：思路沿用PC端，上手简单。

    缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特 别小，操作的按钮也很小，用户体验较差。

• 流式布局

  • 流动布局重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以 在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一 样，优点是流动布局可以很好解决自适应需求，缺点是通过大量的百分比布局，会出现兼 容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性。

• 响应式做法

  • 根据目标用户的访问设备的主要类型做三种或四种布局。

    每种布局有一个区间即可利用媒体查询@media,可以为不同分辨率的设备加载不同的 样式。这种方法的优点是可以相对精确的控制显示效果，但可能需要对同一个类书写不同 的样式会导致代码比较繁复，后期维护困难

• rem 布局

  • rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。 比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px

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

  • <script>
        function auto() {
           //获取html宽度（设备宽度）
           var deviceWidth = document.documentElement.clientWidth;
           // 720可以根据实际设计宽度进行修改 
           if (deviceWidth > 720) {
               deviceWidth = 720;
           }
           var fs = (deviceWidth * 100) / 720;
           document.documentElement.style.fontSize = fs + "px";
        }
        window.onresize = function () {
               auto();
           }
      </script>
    

• vw + vh

  • vw 即 Viewport’s width 的简写，是 CSS3 规范中的视口单位，相对于视口的宽度，视口被均分为 100 单

    位的 vw, 相对于视口的高度，视口被均分为 100 单 位的 vh。

  • 750px设计稿 750px=100vw 1px = 0.1333333vw;

    如果使用rem 预设1rem = 100px 100px就是 13.333333vw 由此vm和rem 就可以进行换算了

• Media

  • @media (max-width: 768px) {
           .banner {
               margin-top: 44px;
               background-color: blue;
               height: 2.88rem;
               width: 100%;
           }
     }

​
  orientation: portrait;/*锁定为纵向*/
  orientation: landscape;/* 锁定为横向*/
  
            @media screen and (orientation: landscape) {
              div {
                    width: 300px;
                    height: 300px;
                    background-color: red;
                }
            }
            @media screen and (orientation: portrait) {
                div {
                    width: 300px;
                    height: 300px;
                    background-color: blue;
                }
            }

• 兼容问题

  • 小字体处理

    • 不同浏览器的最小字体不同，有的是10px，有的是12px。

      解决办法：设置字体时，不要小于12px，如果一定要小于12px，使用

      transform:scale()进行缩放。

• 移动端重置样式

  • 1、禁止用户选中文字，安卓无效（在事件那章解决，包括长按的时候会出菜单，用阻止 touchstart 后的默认

    行为搞定）。

    -webkit-user-select: none;

    2、禁止长按弹出系统菜单

    -webkit-touch-callout: none;

    3、去除 android 下 a/button/input 标签被点击时产生的边框 & 去除 ios 下 a 标签被点击时产生的半透明灰

    色背景。

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    4、切换横竖屏或者用户自己通过浏览器设置的话，可以改变字体的大小 ( 需要给 body 下的所有元素 )。

    -webkit-text-size-adjust: 100%;

    5、按钮在 ios 下都是圆角。

    -webkit-appearance: none; //button 与 input 都会有个默认背景

    border-radius: 0; //input 有个默认圆角

  •