移动端开发需要注意的事项

1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport
有些手机网站我们看到如下声明：

<!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">

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

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

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

3、format-detection设置。

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

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

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

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

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

5、禁止复制、选中文本

Element {-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;
}

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

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

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

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

Element{-webkit-appearance: none;
}

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

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

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

<body ontouchstart="">
1
方法二：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写法要尽量包含关键字，首页、频道页、内容页写法要有所侧重。

移动端开发需要注意的事项相关推荐

移动端开发应注意的事项有哪些？
最基本的是布局和适配一般布局都会用flex布局适配用单位rem 1.防止手机中网页放大和缩小,这点是最基本的,在设置meta中的viewport 使用viewport使页面禁止缩放. 通常把use ...
WEB前端开发技巧与注意事项
心知梦圆博客园首页新随笔联系管理订阅随笔- 20 文章- 0 评论- 0 web移动端开发技巧与注意事项汇总一.meta的使用 1.<meta name="vie ...
移动端开发注意事项、需要注意的问题、特殊属性、精灵图、座固定有自适应的布局
一.移动端开发注意事项网址:移动端开发注意事项二.关于meta (一).常用的公共meta属性 1.viewport <meta name="viewport"conte ...
移动端那些事儿（四）移动端开发注意事项
前言之前总结了移动端那些事儿(一)移动端开发注意事项.具体地址是:http://blog.csdn.net/qq_39198420/article/details/77848222 里面罗列了一下手 ...
php post请求后端拿不到值_[精选] uniapp实现多端开发，与PHP是如何结合的
文章来自:https://www.jianshu.com/p/b2cb2a2c3313 作者:Neyo_凉点击加入:PHP自学中心技术交流微信群商务合作: 请加微信(QQ):2230304070 ...
Taro多端开发实现原理与项目实战(二)
Taro多端开发实现原理与项目实战(二) 多端电商平台项目概述及开发准备学习了前面的基础知识和进阶后是否跃跃欲试?我们准备了一个电商平台的项目来和大家一起实践使用 Taro 开发电商平台. 项目概述 ...
Taro多端开发实现原理与项目实战(一)
Taro 多端开发实现原理与项目实战前端多端统一开发背景与趋势介绍背景「大前端」不仅会成为移动开发与 Web 前端的发展趋势,也会是未来的显示设备终端的开发技术趋势? 越来越多的业内人士对此表示 ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...

移动端开发需要注意的事项

移动端开发需要注意的事项相关推荐

最新文章

热门文章