移动端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开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...
随机推荐
- 解读ASP.NET 5 & MVC6系列（9）：日志框架
框架介绍 在之前的.NET中,微软还没有提供过像样的日志框架,目前能用的一些框架比如Log4Net.NLog.CommonLogging使用起来多多少少都有些费劲,和java的SLF4J根本无法相比. ...
- [LeetCode] Can I Win 我能赢吗
In the "100 game," two players take turns adding, to a running total, any integer from 1.. ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- ftp文件的部署
之前在公司搭建了一个静态资源服务器,现在来记录一下 我们是通过搭建vsftp服务,然后结合apache.访问方式为http的方式 一:VSFTPD环境安装 首先我们就是要查看一下vsftpd是否有安装 ...
- Git怎样撤销一次分支的合并Merge
出现的问题: 某一天,所有的开发文件已经在development分支上,但是这时候,线上出了一个问题,需要及时修复,于是从master分支上,拉了一个bug分支,进行处理,master分支本应合并bu ...
- JavaScript系列文章：自动类型转换
我们都知道,JavaScript是类型松散型语言,在声明一个变量时,我们是无法明确声明其类型的,变量的类型是根据其实际值来决定的,而且在运行期间,我们可以随时改变这个变量的值和类型,另外,变量在运行期 ...
- 做web开发和测试，修改hosts指定某个域名访问某个特定的IP后，如何使hosts立即生效的方法
本文转自SUN'S BLOG,原文地址:http://whosmall.com/post/143 hosts的配置方法: 在windows系统中,找到C:\windows\system32\drive ...
- python面向对象一
1.1三种编程方法论 1.面向过程:把复杂的任务一步一步分解成简单的任务. 2.函数式编程:思想上接近于数学运算,根据某种方式,根据方式得出的结果. 3.面向对象编程:一种编程方式,需要使用" ...
- rmarkdown教程
https://github.com/yihui/r-ninja/blob/master/11-auto-report.md http://rpubs.com/about/getting-starte ...
- win7系统的右键菜单只显示一个白色框不显示菜单项 解决办法
如上图所示,桌面或其他大部分地方点击右键菜单,都只显示一个白色框,鼠标移上去才有菜单项看,并且效果很丑 解决办法: 计算机-右键-属性-高级-性能-设置-视觉效果-淡入淡出或滑动菜单到视图,将其前面的 ...