建站经验技巧制作手机移动版网站常用的细节标签

制作手机移动版网站常用的细节标签

制作手机版的网站,一般都使用html5标准,所以在网页开头一定要写上<!DOCTYPE html><meta charset="utf-8" />,手机版网站一般使用utf-8编码不使用GBK的编码,以免出现一些乱码,还有下面这些细节需要了解的:

1. 页面宽度与屏幕宽度的适应定义,控制viewport的宽度等于为设备的宽度,初始的缩放比例设置为1,并禁止用户手动缩放:

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

2.  忽略Android平台中对邮箱地址的识别:

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

3. 忽略将页面中的数字识别为电话号码:

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

4. 给网站设置小图标favicon.ico放入根目录并使用下面的属性:

<link rel="shortcut icon" href="favicon.ico" />

5. 在Android系统或者iOS中,点击电话代码直接拨打的方法如下:

<a href="tel:18932564578">打电话给:18932564578</a>

6. 在Android系统或者iOS中,点击电话代码发短信的方法如下:

<a href="sms:10010">发短信给: 10010</a>

7. 点击邮件地址启动系统邮件程序:

<a href="mailto:xxxx@google.com">发电子邮件</a>

8. 清除iOS设备输入框内阴影,CSS定义如下:

input,textarea {-webkit-appearance:none;}

9. iOS设备上禁止长按链接或图片弹出菜单的设置:

a, img {-webkit-touch-callout:none;}

10. 给盒子模型定义box-sizing:content-box使盒子宽度包括内边距,便于更好的设置尺寸:

.box {box-sizing:content-box;}

11. 禁止某些搜索引擎对网页进行恶意转码(设置了还有可能被转码,面对有些无赖也没办法……):

<meta http-equiv="Cache-Control" content="no-transform" /> 
<meta http-equiv="Cache-Control" content="no-siteapp" />

12. 手机页面指向对应的PC版网页:

<link rel="canonical" href="http://www.google.com/" />

13. 告诉搜索引擎这是移动版的网页(百度推荐使用):

<meta name="applicable-device" content="mobile" />

14. 是否启用WebApp全屏模式(iOS设备):

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

15. 设置状态栏的背景颜色(启用WebApp全屏模式时生效):

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

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/website/72.html