移动端开发应注意的事项有哪些？

最基本的是布局和适配

一般布局都会用flex布局

适配用单位rem

1、防止手机中网页放大和缩小，这点是最基本的，在设置meta中的viewport

使用viewport使页面禁止缩放。通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2、当然还有这一种方式，大致是一样的，但还有细微的差别

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明。

使用viewport使页面禁止缩放。通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。

完整的viewport设置，当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

3、苹果手机的一些设置。

< meta name="apple-mobile-web-app-capable" content="yes">

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

4、format-detection设置。

< meta name="format-detection" content="telephone=no">
< meta name="format-detection" content="email=no">

format-detection 启动或禁用自动识别页面中的电话号码、邮箱地址。

5、上下拉动滚动条时卡顿、慢

body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;
}

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

6、禁止复制、选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

解决移动设备可选中页面文本(视产品需要而定)

7、长时间按住页面出现闪退

element {-webkit-touch-callout: none;
}

8、iphone及ipad下输入框默认内阴影

Element{-webkit-appearance: none;
}

9、ios和android下触摸元素时出现半透明灰色遮罩

Element {-webkit-tap-highlight-color:rgba(255,255,255,0)
}

10、active兼容处理即伪类 :active 失效
方法一：body添加ontouchstart

<body ontouchstart="">

方法二：js给 document 绑定 touchstart 或 touchend 事件

<style>
a {color: #000;
}
a:active {color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>document.addEventListener(‘touchstart‘,function(){},false);
</script>

10、动画定义3D启用硬件加速

Element {-webkit-transform:translate3d(0, 0, 0)transform: translate3d(0, 0, 0);
}

注意：3D变形会消耗更多的内存与功耗

11、Retina屏的1px边框

Element{border-width: thin;
}

12、旋转屏幕时，字体大小调整的问题

*{-webkit-text-size-adjust:100%;
}

13、顶部状态栏背景色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

14.手机网站改版或变动时做好301重定向。
百度官方对于手机网站改版或者更换域名指出，新老内容映射要尽量简单，换域名时，如果能够做到路径不变，则负面影响面会更小，而且影响时间也会更短

15.做好移动版与PC版网站的转换
①确保在手机网站或者PC端网站各个页面上有相应的导航或者提示链接，让用户可以在手机版和PC版进行切换，也便于搜索引擎更好的收录。

②百度官方曾声明，对于移动站点，当baiduspider ua或者其它无法确定来源的ua访问时，建议默认情况下直接返回html5 或xhtml 类型的移动页面，不要重定向到PC页面。

16.手机网站适配声明。
手机页面进行合适的 DOCTYPE 声明有助于搜索引擎识别该页面是否适合手机浏览。声明位于文档中的最前面的位置，处于标签之前。例如：

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

wml协议的手机页面可以使用如下DOCTYPE:

<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”>

而HTML5协议的DOCTYPE为：

<!DOCTYPE HTML>

17.url链接规范化。
①对于多个板块的二级域名或者目录来说，使用规范、简单的url，尽量去除与页面内容无关的参数，如用来区分手机型号、区分访问用户，方便统计等的参数。如手机版的“百度知道”http://wapiknow.baidu.com/

②页面url链接跳转最好是正常格式的目标url，不要中间进行跳转。

18、定位和页面设计。
无论是PC端还是移动端，网站都要考虑清楚消费群体的定位问题。虽然智能手机用户数量非常普及，但是要明白中国的大部分手机用户使用的还是2G网络，一直高喊的3G、4G手机用户只有大约15%左右。所以，在页面设计时，要考虑到用户打开网页的时长，一些炫丽的flash、JS等建议还是不用为好。这不仅仅是用户体验的问题，也是尽量减少百度索引抓取的工作，让百度蜘蛛尽可能多的爬行和收录页面。

19.其它优化事项
其它一些优化要点与传统PC端网站优化一样。如网站结构要用合理的树形结构，最好采用树形和扁平相结合;清晰的面包屑导航，方便搜索引擎爬行抓取和用户体验;title写法要尽量包含关键字，首页、频道页、内容页写法要有所侧重。

移动端开发应注意的事项有哪些？相关推荐

移动端开发需要注意的事项
1.防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport 有些手机网站我们看到如下声明: <!DOCTYPE html PUBLIC ...
WEB前端开发技巧与注意事项
心知梦圆博客园首页新随笔联系管理订阅随笔- 20 文章- 0 评论- 0 web移动端开发技巧与注意事项汇总一.meta的使用 1.<meta name="vie ...
chipsel语言_用VHDL语言对FPGA和CPLD器件进行开发时应注意的事项
第25卷第4期苏州大学学报(工科版)Vol.25No.4 2005年8月JOURNA L OF SOOCH OW UNIVERSIT Y(ENGINEERING SCIENCE E DI ...
移动端开发注意事项、需要注意的问题、特殊属性、精灵图、座固定有自适应的布局
一.移动端开发注意事项网址:移动端开发注意事项二.关于meta (一).常用的公共meta属性 1.viewport <meta name="viewport"conte ...
移动端那些事儿（四）移动端开发注意事项
前言之前总结了移动端那些事儿(一)移动端开发注意事项.具体地址是:http://blog.csdn.net/qq_39198420/article/details/77848222 里面罗列了一下手 ...
Taro多端开发实现原理与项目实战(二)
Taro多端开发实现原理与项目实战(二) 多端电商平台项目概述及开发准备学习了前面的基础知识和进阶后是否跃跃欲试?我们准备了一个电商平台的项目来和大家一起实践使用 Taro 开发电商平台. 项目概述 ...
css 清空ios端_H5移动端开发常见的问题处理
稍微整理了几个经常在H5移动端开发遇到的东西不用说我也知道,此类文章太多太多了,常见的譬如: viewport.强制浏览器全屏.IOS的Web APP模式.可点击元素出现阴影(这个我觉得真没必要去掉 ...
移动端开发注意的事宜
1.什么是移动端开发?以及开发的工具?有哪些方式? 移动开发也称为手机开发,或叫做移动互联网开发.是指以手机.PDA.UMPC等便携终端为基础,进行相应的开发工作,由于这些随身设备基本都采用无线上网的 ...
2016届360公司PHP服务端开发笔试和面试之所得所感
这是一篇叙述自己在360公司参加笔试和面试的过程,可能面试的职位并不是你所学的方向,但是如果你能从中学到些什么或者吸取我的教训,那么作者就非常知足了.本着"学习别人是怎么失败的,活着出来的人 ...

移动端开发应注意的事项有哪些？

移动端开发应注意的事项有哪些？相关推荐

最新文章

热门文章