我的回答

  1. 布局使用flex
  2. 使用2倍+像素
  3. 兼容性问题
  4. 尺寸问题
  5. 缩放问题

    参考回答

    1.添加禁止浏览器主动缩放功能

    涉及到网页开发历史遗留问题，最开始的手机浏览器网页时直接访问电脑网页或访问专门为诺基亚手机开发的WAP页面，对于电脑网页由于手机分辨率太低，浏览器会使用缩放页面的方式来展示原页面，这个也是为什么在手机页面上直接使用document.documentElement.clientWidth获取到值为980，所以为了避免浏览器的自动缩放，需要在手机端
    1. <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,minimum=1.0">

    2.移动端字体放大问题

    当可视部分的宽度小于480px也就是iPhone横屏的时候，需要进行处理
  • 禁用html节点的字号自动调整。默认情况下，iPhone会将过小的字号放大，我们可以通过-webkit-text-size-adjust属性进行调整
  • 将main-nav中的字号设置为90%
    1. @media screen and (max-width:480px){
    2.   html{
    3.       -webkit-text-size-adjust:none
    4.   }
    5.   .main-nav a{
    6.       font-size:90%;
    7.       padding:10px 6px;
    8.   }
    9. }

    3.移动端1px的问题

    在移动端web开发中，UI设计稿中设置边框为1px，前端在开发过程中如果出现：border:1px,测试会发现在某个机型上，1px会比较粗，即是经典的移动端1px问题。设备的物理像素(设备像素)和逻辑像素(css像素)可以使用viewport+rem或transform:scale(0.5)来实现。