移动端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] Factorial Trailing Zeroes 求阶乘末尾零的个数
Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in log ...
- [node.js 学习]1.start a simple server
1.启动一个本地的服务 下面是官方的例子,会生成一个随机端口,返回的是纯文本: var net = require('net'); var server = net.createServer((soc ...
- 冰冻三尺非一日之寒--jQuery
第十七章 jQuery http://jquery.cuishifeng.cn/ 一.过滤选择器: 目的:处理更复杂的选择,是jQuery自定义的,不是CSS3中的选择器. ...
- OpenCV图像的全局阈值二值化函数（OTSU）
cv::threshold(GrayImg, Bw, 0, 255, CV_THRESH_BINARY | CV_THRESH_OTSU);//灰度图像二值化 CV_THRESH_OTSU是提取图像最 ...
- 设计向 20款优秀免费的Icons图标合集 (转)
Pioneer Icons Free Sample Sketch Resource Zodiac Icon Set Sketch Resource 90 Pixel Perfect Halloween ...
- BZOJ 1041: [HAOI2008]圆上的整点
1041: [HAOI2008]圆上的整点 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3621 Solved: 1605[Submit][Sta ...
- 5 HTML&JS等前端知识系列之jquery基础
preface jquery其实就是对javascript的再次封装,方便我们开发者调用,下载地址是:http://jquery.com/download/ ,下面就说说常用使用方法 选择器 基本选择 ...
- wpf 遍历控件及其值
/// <summary> /// 遍历控件及其值 /// </summary> /// <param name="uiControls">界面 ...
- win10下的使用
一.win10下使用win7那样的图片查看器快些. 打开图片的设置,关闭自动增强我的图片 二.查看win10秘钥 1.打开注册表,依次定位:HKEY_LOCAL_MACHINE/SOFTWARE/Mi ...
- logistic regression与SVM
Logistic模型和SVM都是用于二分类,现在大概说一下两者的区别 ① 寻找最优超平面的方法不同 形象点说,Logistic模型找的那个超平面,是尽量让所有点都远离它,而SVM寻找的那个超平面,是只 ...