关于移动端的一些杂七杂八的笔记~

原创 酒心棉花糖 随笔 笔记 463阅读 2018-03-13 16:19:53 举报

viewport

视口(可视区窗口,默认980)

  1. width 设置可视区宽度(number || device-width).
    width=device-width表示宽度等于屏幕宽。
  2. initial-scale单独无效,配合最小缩放比例来使用,两者要保持一致。如果初始缩放和最小缩放都设置为0.5,它实际上是把视口放大了一倍。
  3. maximum-scale : 最大缩放比例
  4. minimum-scale : 最小缩放比例
  5. user-scalable 用户缩放 : (yes || no);
    禁止了用户缩放后maximum-scale和minimum-scale其实是无效的,加上initial-scale的特性其实我们在加视口元数据时只要这样一句就行

window.devicePixelRatio (把一个物理像素放大至N个设备像素去显示)
其他的meta标签请看~很多meta

一些样式问题

  1. a,
    input,
    button{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    在移动端点击按钮,链接时会有黑色的阴影出现,去除这个阴影只要把这个属性的透明度设置为0。
  2. input,
    button {
    -webkit-appearance: none;
    border-radius: 0;
    }
    在ios上按钮默认为圆角,这个可以清除圆角。
  3. body * {
    -webkit-text-size-adjust: 100%; //禁止用户修改字体大小
    -webkit-user-select: none; // 禁止用户选择文字
    }
    这两个样式都有兼容性问题。
  4. Font Boosting 在一段文字我们没有给他设置高度的时候,在webkit内核下,文字的大小被浏览器放大了
    解决办法:
    1.设置高度
    2.设置最大高度 max-height

一些适配方案

  1. 百分比适配。(宽度百分比,高度固定)
  2. viewport适配。(将所有屏幕都设置为targetW)

    (function(){
    var w = window.screen.width;
    var targetW = 320;
    var scale = w/targetW; //当前尺寸/目标尺寸
    var meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
    document.head.appendChild(meta);
    })();

  3. rem布局
    (function(){
    var html = document.documentElement;
    var hWidth = html.getBoundingClientRect().width;
    html.style.fontSize = hWidth/10 + "px";
    })()
    红字部分可自行改动。
    在这里我们将屏幕分为10份,那么一份也就是1rem。那么给设计图width也除以10,如果设计图为750px;那么75就是设计图的1rem;一个div在设计图上款100px;那么它就等于100/75 rem;可以利用sass或less去计算。
    这里的js还有监听窗口大小改变的事件我认为没有必要,因为一般移动设备的窗口无法改变。
    $psd : 750;//设计图尺寸
    $num : 10; // 设置根元素时的被除数
    @function getRem($n) {
    @return $n / ($psd / $num) * 1rem;
    }
    p{width:getRem(100)} ==> p{width:1.33333rem}
  4. flex布局

因为js生成的根字体大小不一定为整数,所以可以设置body字体。其余字体用em单位设置。最佳: 用flex布局,rem设置宽高paddingmargin等属性,fontSize则用媒体查询来设置body的字体大小,其他用em单位来设置

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复