移动端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;
}
可参考：
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>
如果主体是使用悬浮布局，还得解决一些浏览器的兼容问题（清除浮动）。
参考：
3、flex布局
只能说flex布局真的很好用
4、移动端的meta
移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。让普通移动网页被添加到主屏幕后，拥有一些类native的功能
可以查看天猫、淘宝、网易、京东、百度等等移动端的一些设置
5、移动端跟PC端的区别
适配不同大小的屏幕；
兼容安卓的众多版本；
有些css属性在手机上会不生效
手机上click事件有延迟
可以说：移动端需要关注的主要是浏览器；视口；事件等等。
关于浏览器：
iOS下的浏览器就不用多说了，是因为iOS下的浏览器相对安卓而言不混乱。而且，苹果不允许安装其他渲染引擎。不过基于代理浏览器的特性，苹果上可以安装代理浏览器（但也不是所有代理浏览器都可以）。所以在苹果手机上测试web页面时，我们一般测试Safari浏览器即可，必要时可以测试代理浏览器。
对于安卓的话，Web开发者在面对安卓时遇到的问题是，不像其它平台，安卓的内置浏览器的情况很复杂，受到多方面因素的影响，正如前面所提到的，就浏览器而言，不同的厂商，不同的品牌手机，不同的操作系统，不同的内置浏览器，甚至同一种浏览器的不同版本都有可能对于移动端的某一些样式或事件的支持不同。而安卓平台的开放性，让更多的手机厂商，浏览器厂商都可以开发自己的一个浏览器来增加设备或操作平台的价值。这也就造就了安卓市场下的各浏览器的繁复和差异化。（例如，两个不同手机厂商的内置浏览器在针对同一个web样式上做了不同优化处理）。不过还好，大多数都是基于webkit，但是测试的时候还是要在主流的浏览器都测试一下。
参考：http://www.cnblogs.com/chunyangji/archive/2016/08/16/5776692.html
移动端web开发的一些知识点的更多相关文章
- web开发前端面试知识点目录整理
web开发前端面试知识点目录整理 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, ...
- 手摸手带你学移动端WEB开发
HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 移动端web开发基础概念
最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...
- 移动端Web开发注意点
不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版 ...
- 移动端Web开发如何处理横竖屏
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...
- 移动端web开发技巧（转）
原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...
随机推荐
- [LeetCode] Maximum Gap 求最大间距
Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...
- 单点登录改进版-使用ajax分发cookie避免重定向轮询
前言 继上一篇博文:可跨域的单点登录(SSO)实现方案[附.net代码]虽然实现了单点登录,也存在很多不合理的地方.很多热心的朋友也给出了很多指导性的意见,特别是 LoveCoder提出的意见. 在很 ...
- background-image和img的区别
background-img的时候外边的div必须有宽和高.并且你只能决定图片位于你div的位置不能拉伸图片,或者改变图片的宽高.但是background-image是可以重复的,所以只要你的图片不是 ...
- NC 销售订单
主表:so_sale,主键:csaleid 子表1:so_saleorder_b 主键:corder_bid 子表2:so_saleexecute 主键:csale_bid 要求子表1和子表2 主键相 ...
- chrome 更新flash插件
下载下面的插件并安装 https://fpdownload.macromedia.com/pub/labs/flashruntimes/flashplayer/install_flash_player ...
- SQLSERVER单表CRUD通用方法
一.适用场景 ①当你书写简单的增删改查心累了 ②当你的项目不考虑并发.高性能 ③当你追求更快速的开发效率 ④当你的业务只涉及单表 二.代码展示 ①单表Insert public bool Insert ...
- 练习JavaScript实现过滤特殊字符
for循环遍历特殊字符和用户输入字符,然后做比较,返回结果. <script type="text/javascript"> var name = prompt(&qu ...
- 【BZOJ-3143】游走 高斯消元 + 概率期望
3143: [Hnoi2013]游走 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2264 Solved: 987[Submit][Status] ...
- maven引入多个spring jar包中存在同名文件的问题
项目打包后执行报错:Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespaceht ...
- 简单的Linux的用户权限管理
企业生产环境用户权限集中管理方案案例 建立中要添加如下的项目经验: 在了解公司业务流程后,提出权限整改解决方案,改进公司超级用户Root权限泛滥的问题. 我首先写好方案后,给老大看,取得老大的支持后, ...