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 有个默认圆角
  •