移动端开发和pc端开发笔记摘录【分享】

本文摘录自各位前端大神，本人只是学习笔记使用，谢谢各位大神的资料指导！

先说布局方面：

PC端咱们最常用的就是固定宽度980px（也有960，1000,1200），然后水平居中 ；

width:980px;margin:0 auto;

但移动端就不能这么用了，因为很多网页都是可以横屏看，也可以竖屏看；很多屏幕的分辨率不一样；
所以只要牵涉到移动端，就要牵涉到响应式（也叫自适应）；如果是只针对移动端的项目，我平时主要考虑的是320px宽 到 750px宽的兼容；

如何测试

我最常用的是chrome的手机模拟器；
右键-审查元素（或F12），developer tools出来后，点击左上角那个手机；

关于移动端

1、iPhone上submit按钮bug：iPhone上的控件（、之类的）若不写-webkit-appearance: none; 的话，就算你已经做好了控件的样式，iPhone还是会使用自身默认的样式。
2、移动端的自动播放功能：移动端浏览器大部分是禁用video和audio的autoplay功能，并且，很多移动浏览器也不支持首次js调用play方法进行播放。（此段内容摘抄自百度回答~）
3、手机端的字体显示问题：手机端文本字的大小也有点不一样，iPhone上最小字体可以显示10px，安卓大部分手机由于不是高清显示屏，像素不够只能最小显示12px的字体。编写的时候需要注意。

4、移动端设备的分辨率：iPhone设备分辨率宽度分别为640、750、828，我们这里现在的设计稿一般是使用750的宽度，实际开发时需要将宽高减半，包括字体（字体在小于24px的情况是需要与设计师确认是否为系统字，减半后安卓在字体小于10px时会按照12px大小显示）

width:calc(100% - 10px);
width:-webkit-calc(100% - 10px);
width:-moz-calc(100% - 10px);

该属性在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。Opera貌似还不支持～～

5.M端的自适应布局的两种方式

6.移动端一般会在头部加一些这样的代码

一般在网页中都会在头部有一些这样的代码

1）首先 name="viewport" 声明了视口，也就是移动端的视频窗口的一个声明与是一个道理，但是没添加属性就等于无效果一样。

2）content="width=device-width, //应用程序的宽度和屏幕的宽度是一样的

3）initial-scale=1.0　　　//应用程序启动时的缩放比例(1.0表示不缩放)

4）maximum-scale=1.0　　//用户可以放大到最大尺度(1.0表示不缩放)

5)  minimum-scale=1.0　　//用户可以缩放到最小尺度(1.0表示不缩放)

6）user-scalable="no"　　 //用户是否可以通过他的手势来缩放整个应用程序，使程序的尺度发生一个改变(yes/no)

7. 使用媒体查询加载指定大小的背景图片

    利用 @media CSS媒体查询来改变背景图片，使得不同的媒体设备对应不同的背景图片，提升用户体验 。

 /*默认图片*/
 .someElement {
      background-image: url(someImg.jpg);
 }

 @media only screen and (max-width: 1024px){
 /*使用移动终端时的样式设定*/
     .someElement{
         background-image: url(otherImg.jpg);
     }
 }

8.js的一些PC端web事件在移动端的对应

1.onkeyUp,onkeyDown,onkeyPress等事件不再管用，要用oninput代替

2.onclick事件会有延迟，因为手机需要等待判断是否是双击事件(ondblclick)。所以，最好用touchstart事件代替。

3.onmousemove事件用touchmove事件代替

4.touchend事件表示手指离开屏幕时触发。

5.给dom元素注册事件用document.getElementById('eleId').addEventListener('touchstart',function(){});

6.event事件也不太一样了，当然keyCode这些值是肯定取不到了。

7.focus()事件经测试是可以用的，但不知道为啥在微信浏览器中不行。