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

整理一下本身平时移动端web开发中遇到的问题,也参考一下前辈的一些总结css

一、最多见的要数1像素边框了html

由于Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成2px。前端

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

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

div{
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

可参考:github

走向视网膜(Retina)的Web时代web

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

 

二、CSS Sticky Footer布局浏览器

大概就是这个意思:若是页面内容不够长的时候,页脚块粘贴在视窗底部;若是内容足够长时,页脚块会被内容向下推送。移动端web

经过设置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: 100%;margin: 0;padding: 0}
        body > #wrap {height: auto; min-height: 100%;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

 

三、flex布局

只能说flex布局真的很好用

移动端全兼容的flexbox速成班

flex

 

四、移动端的meta

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

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

HTML head 头标签

 

五、移动端跟PC端的区别

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

能够说:移动端须要关注的主要是浏览器;视口;事件等等。

关于浏览器:

iOS下的浏览器就不用多说了,是由于iOS下的浏览器相对安卓而言不混乱。并且,苹果不容许安装其余渲染引擎。不过基于代理浏览器的特性,苹果上能够安装代理浏览器(但也不是全部代理浏览器均可以)。因此在苹果手机上测试web页面时,咱们通常测试Safari浏览器便可,必要时能够测试代理浏览器。

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

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

相关文章
相关标签/搜索