移动端前端开发与pc端前端开发的区别

作者：孙骄
链接：https://www.zhihu.com/question/34364365/answer/58583713
来源：知乎

关于移动端：
1、iPhone上submit按钮bug：iPhone上的控件（<button>、<input>之类的）若不写-webkit-appearance: none; 的话，就算你已经做好了控件的样式，iPhone还是会使用自身默认的样式。
2、移动端的自动播放功能：移动端浏览器大部分是禁用video和audio的autoplay功能，并且，很多移动浏览器也不支持首次js调用play方法进行播放。（此段内容摘抄自百度回答~）
3、手机端的字体显示问题：手机端文本字的大小也有点不一样，iPhone上最小字体可以显示10px，安卓大部分手机由于不是高清显示屏，像素不够只能最小显示12px的字体。编写的时候需要注意。
4、移动端设备的分辨率：iPhone设备分辨率宽度分别为640、750、828，我们这里现在的设计稿一般是使用750的宽度，实际开发时需要将宽高减半，包括字体（字体在小于24px的情况是需要与设计师确认是否为系统字，减半后安卓在字体小于10px时会按照12px大小显示）

另外写几点响应屏幕大小的建议和方法：
1、由于现在手机屏幕多种多样，想要兼容所有设备所需要开发的经验必须非常丰富，对设计师的要求也非常高，如果是初学或者开发经验较少，可将设备分为手机、平板、PC三种页面来写。
2、宽度的响应：宽度的响应最近使用的最多的就是类似以下这种写法

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

好处是可以很好的控制布局，把已知的宽度和整列宽度结合在一起使用，方便设置位置。
另外有些比较奇葩的手机游览器可能不兼容css3的属性，这时你可以使用以下代码来加强你代码的健壮性

@media screen and (max-width: 355px) {         //宽度小于355px时
    ...                                        //添加属性
}

3、图片的处理：由于各个设备的分辨率不同，理论上需要切出不同设备大小的图片，并且判断当前设备的分辨率再调用相对应的图片。但操作起来实在是过于困难，所以一般都是使用同一张图片来显示。

我来说说calc()的兼容问题：
calc()属性也是近两个月才使用的，目前仅有一台安卓的测试机放到我们自制的app平台上使用时无法读取该样式，该机器在自带的游览器内看是可以正常显示的。我们的处理方法是在使用calc()的上面写上普通的样式，例如：

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

当游览器无法读取样式时会使用最上面的widht：95%;这样会与实际设计稿有些许出入，所以使用时谨慎对待~