有些手机网站我们看到如下声明:
设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明。
使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
完整的viewport设置,当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。
< meta name="apple-mobile-web-app-capable" content="yes">
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
< meta name="format-detection" content="telephone=no">
< meta name="format-detection" content="email=no">
format-detection 启动或禁用自动识别页面中的电话号码、邮箱地址。
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
解决移动设备可选中页面文本(视产品需要而定)
element {
-webkit-touch-callout: none;
}
Element{
-webkit-appearance: none;
}
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
方法一:body添加ontouchstart
方法二:js给 document 绑定 touchstart 或 touchend 事件
bar
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意:3D变形会消耗更多的内存与功耗
Element{
border-width: thin;
}
*{
-webkit-text-size-adjust:100%;
}
百度官方对于手机网站改版或者更换域名指出,新老内容映射要尽量简单,换域名时,如果能够做到路径不变,则负面影响面会更小,而且影响时间也会更短
①确保在手机网站或者PC端网站各个页面上有相应的导航或者提示链接,让用户可以在手机版和PC版进行切换,也便于搜索引擎更好的收录。
②百度官方曾声明,对于移动站点,当baiduspider ua或者其它无法确定来源的ua访问时,建议默认情况下直接返回html5 或xhtml 类型的移动页面,不要重定向到PC页面。
手机页面进行合适的 DOCTYPE 声明有助于搜索引擎识别该页面是否适合手机浏览。声明位于文档中的最前面的位置,处于标签之前。例如:
wml协议的手机页面可以使用如下DOCTYPE:
而HTML5协议的DOCTYPE为:
①对于多个板块的二级域名或者目录来说,使用规范、简单的url,尽量去除与页面内容无关的参数,如用来区分手机型号、区分访问用户,方便统计等的参数。如手机版的“百度知道”http://wapiknow.baidu.com/
②页面url链接跳转最好是正常格式的目标url,不要中间进行跳转。
无论是PC端还是移动端,网站都要考虑清楚消费群体的定位问题。虽然智能手机用户数量非常普及,但是要明白中国的大部分手机用户使用的还是2G网络,一直高 喊的3G、4G手机用户只有大约15%左右。所以,在页面设计时,要考虑到用户打开网页的时长,一些炫丽的flash、JS等建议还是不用为好。这不仅仅 是用户体验的问题,也是尽量减少百度索引抓取的工作,让百度蜘蛛尽可能多的爬行和收录页面。
其它一些优化要点与传统PC端网站优化一样。如网站结构要用合理的树形结构,最好采用树形和扁平相结合;清晰的面包屑导航,方便搜索引擎爬行抓取和用户体验;title写法要尽量包含关键字,首页、频道页、内容页写法要有所侧重。