Question

移动端前端开发与PC端比有哪些不同

Answer 1

1、pc端有ie,chrome,ff 内核兼容问题移动端，简单来说兼容问题相对较少。但是移动端要做好多分辨率的处理。移动端所有图片和所有html标签的尺寸都要减半。
2、移动端在布局跟js效果方面，与PC端有什么不同：
先说布局方面：
PC端最常用的就是固定宽度980px（也有960，1000,1200），然后水平居中 width:980px;margin:0 auto;但移动端就不能这么用了，因为很多网页都是可以横屏看，也可以竖屏看；很多屏幕的分辨率不一样；
所以只要牵涉到移动端，就要牵涉到响应式（也叫自适应）；如果是只针对移动端的项目，我平时主要考虑的是320px宽 到 750px宽的兼容；
js方面：（有没有canvas，对js影响很大）
第一、普通移动端网页（比如手机新浪网，手机淘宝，手机百度等）这个在js方面和PC端区别不是太大；主要的区别在于移动端没有了鼠标悬停（onmouseover）；点击（onclick）还可以用；多了触摸、滑动（会用一些插件）。
第二、canvas相关游戏canvas相关的html5增加了好多js；
3、手机游览器可能不兼容css3的属性，这时你可以使用以下代码来加强你代码的健壮性
(1)@media screen and (max-width: 355px) { //宽度小于355px时
...
(2)我们的处理方法是在使用calc()的上面写上普通的样式，例如：width:95%;
width:calc(100% - 10px);
width:-webkit-calc(100% - 10px);
width:-moz-calc(100% - 10px);
当游览器无法读取样式时会使用最上面的widht：95%;这样会与实际设计稿有些许出入，所以使用时谨慎对待~

Answer 2

关于移动端：
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大小显示）