移动端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开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...
随机推荐
- elasticsearch5.0及head插件安装
这个瞎jb整了半天.准备把es2.4升级到5.0,结果老报错 环境:centos6.5+es2.4是ok的换成es5就出毛病.也不能说啥 ,我用的是最新的 源码解压启动时候报错,具体错误for ...
- [LeetCode] Strong Password Checker 密码强度检查器
A password is considered strong if below conditions are all met: It has at least 6 characters and at ...
- [LeetCode] Intersection of Two Linked Lists 求两个链表的交点
Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...
- Android开发之Activity横竖屏切换生命周期重建问题
当进行横竖屏切换的时候Activity的生命周期会重建,从而导致Activity崩溃等问题,为了避免这一问题,需要在AndroidManifest.xml文件中设置: <activity and ...
- StringHelper
/// <summary> /// 文本取左边 /// </summary> /// <param name="str"></param& ...
- JVM_七种垃圾收集器介绍
本文中的垃圾收集器研究背景为:HotSpot+JDK7 一.垃圾收集器概述 如上图所示,垃圾回收算法一共有7个,3个属于年轻代.三个属于年老代,G1属于横跨年轻代和年老代的算法. JVM会从年轻代和年 ...
- 基于redis 实现分布式锁的方案
在电商项目中,经常有秒杀这样的活动促销,在并发访问下,很容易出现上述问题.如果在库存操作上,加锁就可以避免库存卖超的问题.分布式锁使分布式系统之间同步访问共享资源的一种方式 基于redis实现分布式锁 ...
- HTML学习笔记——标签（二）
标签十二:<ul>标签 语义:是没有前后顺序的信息列表 语法: <ul> <li>信息</li> <li>信息</li> ... ...
- js-权威指南学习笔记2
第三章 类型.值和变量 1.JS的数据类型分为两类:原始类型(基本数据类型/不可变类型)和对象类型(引用数据类型/可变类型). JS中的原始类型包括数字/字符串/布尔值,还有两个特殊的:null和un ...
- Xamarin.ios 目录结构
1.Resources: 文件夹存放应用程序所. 2.AppDelegate.cs: 主要的应用程序类别(class) ,并接听 系统事件及相对应的事件处理. 3.Entitlements.plist ...