移动端web开发的一些知识点

整理一下自己平时移动端web开发中遇到的问题，也参考一下前辈的一些总结

1、最常见的要数1像素边框了

因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在dpr=2的retina屏下会显示成2px。

但在IOS8中，已经支持0.5px了，那就意味着, 在devicePixelRatio=2的时候，我们可以使用css设置为0.5。

平时用的比较多的也是使用transform了：

div{

    height:1px;

    background:#;

    -webkit-transform: scaleY(0.5);

    -webkit-transform-origin: ;

    overflow: hidden;

}

可参考：

走向视网膜（Retina）的Web时代

移动web 1像素边框瞧瞧大公司是怎么做的

2、CSS Sticky Footer布局

大概就是这个意思：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

通过设置margin-top、padding-bottom来实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        html, body, #wrap {height: %;margin: ;padding: }

        body > #wrap {height: auto; min-height: %;background-color: blue;}

        #main {padding-bottom: 150px;}

        #footer {position: relative;margin-top: -150px; height: 150px;clear:both;background-color: red;}

    </style>

</head>

<body>

<div id="wrap">

    <div id="main" class="clearfix">

        <div id="content"></div>

        <div id="side"></div>

    </div>

</div>

<div id="footer">

</div>

</body>

</html>

如果主体是使用悬浮布局，还得解决一些浏览器的兼容问题（清除浮动）。

参考：

CSS秘密花园： Sticky foote

3、flex布局

只能说flex布局真的很好用

移动端全兼容的flexbox速成班

flex

4、移动端的meta

移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。让普通移动网页被添加到主屏幕后，拥有一些类native的功能

可以查看天猫、淘宝、网易、京东、百度等等移动端的一些设置

HTML head 头标签

5、移动端跟PC端的区别

适配不同大小的屏幕；
兼容安卓的众多版本；
有些css属性在手机上会不生效
手机上click事件有延迟

可以说：移动端需要关注的主要是浏览器；视口；事件等等。

关于浏览器：

iOS下的浏览器就不用多说了，是因为iOS下的浏览器相对安卓而言不混乱。而且，苹果不允许安装其他渲染引擎。不过基于代理浏览器的特性，苹果上可以安装代理浏览器（但也不是所有代理浏览器都可以）。所以在苹果手机上测试web页面时，我们一般测试Safari浏览器即可，必要时可以测试代理浏览器。

对于安卓的话，Web开发者在面对安卓时遇到的问题是，不像其它平台，安卓的内置浏览器的情况很复杂，受到多方面因素的影响，正如前面所提到的，就浏览器而言，不同的厂商，不同的品牌手机，不同的操作系统，不同的内置浏览器，甚至同一种浏览器的不同版本都有可能对于移动端的某一些样式或事件的支持不同。而安卓平台的开放性，让更多的手机厂商，浏览器厂商都可以开发自己的一个浏览器来增加设备或操作平台的价值。这也就造就了安卓市场下的各浏览器的繁复和差异化。（例如，两个不同手机厂商的内置浏览器在针对同一个web样式上做了不同优化处理）。不过还好，大多数都是基于webkit，但是测试的时候还是要在主流的浏览器都测试一下。

参考：http://www.cnblogs.com/chunyangji/archive/2016/08/16/5776692.html

秒客网

移动端web开发的一些知识点

相关文章