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

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

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

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

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

  1. div{
  2.     height:1px;
  3.     background:#;
  4.     -webkit-transform: scaleY(0.5);
  5.     -webkit-transform-origin: ;
  6.     overflow: hidden;
  7. }

可参考：

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

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

2、CSS Sticky Footer布局

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         html, body, #wrap {height: %;margin: ;padding: }
  8.         body > #wrap {height: auto; min-height: %;background-color: blue;}
  9.         #main {padding-bottom: 150px;}
  10.         #footer {position: relative;margin-top: -150px; height: 150px;clear:both;background-color: red;}
  11.     </style>
  12. </head>
  13. <body>
  14. <div id="wrap">
  15.     <div id="main" class="clearfix">
  16.         <div id="content"></div>
  17.         <div id="side"></div>
  18.     </div>
  19. </div>
  20. <div id="footer">
  21. </div>
  22. </body>
  23. </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开发的一些知识点的更多相关文章

  1. web开发前端面试知识点目录整理

    web开发前端面试知识点目录整理 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, ...

  2. 手摸手带你学移动端WEB开发

    HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...

  3. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  4. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  5. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  6. 移动端web开发基础概念

    最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...

  7. 移动端Web开发注意点

    不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版 ...

  8. 移动端Web开发如何处理横竖屏

    <!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...

  9. 移动端web开发技巧（转）

    原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...

随机推荐

  1. javascript深入理解js闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  2. 安装CentOS7文字界面版后，无法联网，用yum安装软件提示 cannot find a valid baseurl for repo:base/7/x86_64 的解决方法

    *无法联网的明显表现会有: 1.yum install出现 Error: cannot find a valid baseurl or repo:base 2.ping host会提示unknown ...

  3. [LeetCode] Remove Invalid Parentheses 移除非法括号

    Remove the minimum number of invalid parentheses in order to make the input string valid. Return all ...

  4. [LeetCode] Minimum Depth of Binary Tree 二叉树的最小深度

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  5. redis学习笔记

    Redis 命令 Redis 命令用于在 redis 服务上执行操作. 要在 redis 服务上执行命令需要一个 redis 客户端.Redis 客户端在我们之前下载的的 redis 的安装包中. 语 ...

  6. js或css文件后面的参数是什么意思？

    经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...

  7. Oracle查询时间字段并排序

    select * from geimstatus_history twhere to_date(t.data_time,'YYYY-mm-dd') = to_date(sysdate,'YYYY-mm ...

  8. Atomikos的使用过程中要注意的事

    在使用Atomikos过程中遇到的一些问题,以作记录: MySQL does not support TMJOIN MySQL does not allow for joining an existi ...

  9. 北京培训记day3

    网络流 一.基础知识点: [容量网络] 图G(V,E)为有向网络,在V中指定一个源点和一个汇点,流量从源点出发经过有向网络流向汇点.对于每一条有向边有权值C,称作弧的容量.有向边称为弧.这样的有向网络 ...

  10. svn1.6在centos6下的使用

    版本 CentOS 6:svn 1.6.11 svn1.6版本的不足在于,每个目录递归存在.svn目录:从1.7开始就只有root节点目录存在.svn目录,和git一样了. 但是因为还在用CentOS ...