移动端和PC端页面差距大，通常不使用媒体查询，而选择做两套HTML绑定同一个域名。根据浏览器不同而选择不同的HTML。

移动端开发和 PC 端开发有哪些区别

以下为举例

手势不一样
- 移动端：touch事件，滚动（iscroll库），手势（hammer.js库）
- PC端： click事件
300ms delay
- 移动端：存在300ms的延迟【手机浏览器的延迟机制，检测单击和双击的区别。】

页面适配，两者设备默认宽度不同
- 移动端：需要设置meta ：viweport
  //宽高等于设备宽高，最小放大：1倍
- PC端：
布局
- 移动端：宽高尽量不写死。尽量用flex布局。or，用动态rem方案。
  因为手机设备格式多样，写死宽高会变形。

开发调试
- browser-sync

如何做移动端页面适配

1. 添加meta


//宽高等于设备宽高，最小放大：1倍

2. 使用动态REM

2.1. 动态设置HTML的font-size

var pageWidth = window.innerWidth
document.write(``)
window.addEventListener("resize", function () {  
    var pageWidth = window.innerWidth
    document.getElementsByTagName("html")[0].style[ "font-size" ]  = pageWidth/10 + 'px'
   //console.log(document.getElementsByTagName("html")[0].style[ "font-size" ])   
});

2.2. 利用sass(px2rem)

@function px($px){
    @return $px/$designWidth * 10 + rem;
}
$designWidth : 320;  //开发设备固定宽度

移动端开发有哪些常见的坑

参考

1、click300ms延迟
300ms delay来源及

解决方案
1.fastclick可以解决在手机上点击事件的300ms延迟
2.zepto的touch模块，tap事件也是为了解决在click的延迟问题
3.触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
4.若移动设备兼容性正常的话（IE/Firefox/Safari(IOS 9.3)及以上），只需加上一个meta标签
即把viewport设置成设备的实际像素，那么就不会有这300ms的延迟。

2、移动端样式兼容处理

3、阻止旋转屏幕时自动调整字体大小

移动端开发时，屏幕有竖屏和横屏模式，当屏幕进行旋转时，字体大小则有可能会发生变化，从而影响页面布局的整体样式，为避免此类情况发生，只需设置如下样式即可

* {
  -webkit-text-size-adjust: none;
}

4、修改移动端难看的点击的高亮效果，iOS和安卓下都有效

 -webkit-tap-highlight-color: rgba(0,0,0,0);

不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！

一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。详细介绍见这

https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

pointer-events: none;

5、iOS下取消input在输入的时候英文首字母的默认大写

6、禁止 iOS 识别长串数字为电话

7、禁止 iOS 弹出各种操作窗口

-webkit-touch-callout: none;

8、禁止ios和android用户选中文字

-webkit-user-select: none;

9、calc的兼容处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

div { 
  width: 95%; 
  width: -webkit-calc(100% - 50px); 
  width: calc(100% - 50px); 
}

10、fixed定位缺陷

iOS下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位，android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位。iOS4下不支持position:fixed

解决方案：可用iScroll插件解决这个问题

11、一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发
针对此种情况只需要对不触发click事件的那些元素添加一行css代码即可

cursor: pointer;

12、消除transition闪屏问题
设置内嵌的元素在 3D 空间如何呈现：保留 3D
-webkit-transform-style: preserve-3d;
(设置进行转换的元素的背面在面对用户时是否可见：隐藏)/
-webkit-backface-visibility: hidden;

13、CSS动画页面闪白,动画卡顿

解决方法:

尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
开启硬件加速

-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

14、iOS系统中文输入法输入英文时，字母之间可能会出现一个六分之一的空格
解决方法：通过正则去除

this.value = this.value.replace(/\u2006/g, ‘‘);

15、input的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决方案时是设置css

line-height：normal;

16、浮动子元素撑开父元素盒子高度

解决方法如下：

父元素设置为 overflow: hidden;
父元素设置为 display: inline-block; 等
这里两种方法都是通过设置css属性将浮动元素的父元素变成间接变成BFC元素，然后使得子元素高度可以撑开父元素。这里需要注意的时，最好使用方法1，因为inline-block元素本身会自带一些宽高度撑开其本身。

17、往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。解决方法：

window.onunload = function () {};

18、overflow-x: auto在iOS有兼容问题

解决方法：

-webkit-overflow-scrolling: touch;

移动端

移动端开发和 PC 端开发有哪些区别

如何做移动端页面适配

移动端开发有哪些常见的坑

你可能感兴趣的:(移动端)