WEB前端开发 » WAP页面制作需要注意的几点

1.遵循html页面的编写规则

2.新建的时候注意文档类型：xhtml-mobile10.dtd

3.特殊的meta标签

    <meta name=”viewport” id=”viewport” content=”width=device-width, initial-scale=1″>

    网页手机wap2.0网页的head里加入下面这条元标签，在手机浏览器中页面将以原始大小显示，并不允许缩放。
   <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
   width – viewport的宽度 height – viewport的高度
   initial-scale – 初始的缩放比例
   minimum-scale – 允许用户缩放到的最小比例
   maximum-scale – 允许用户缩放到的最大比例
   user-scalable – 用户是否可以手动缩放

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

   告诉设备忽略将页面中的数字识别为电话号码

   <a href=”tel://4006300999″>全国免费咨询电话：4006300999</a>

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

   说明：网站开启对web app程序的支持。

4.<link rel=”apple-touch-icon-precomposed” href=”xx.png” /> 苹果添加到主屏幕的图片相当于创建快捷方式

5.a链接不需要新窗口打开

6.大多数的手机只有一种字体

7.能利用样式写的尽量不用图片 为了手机的流量，提倡尽量少用背景图

9.Logo图片的尺寸图片大小一般是实际尺寸的2倍（防止模糊）

10.背景图标利用css3的样式进行缩放 background-size:x y;

11.js一般的效果在手机上都支持，但是现在大部分的效果都需要手指划过触发这就需要添加一些库文件或是自己写一些手机的触发事件

   处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

      1.touchstart:  // 手指放到屏幕上的时候触发

      2.touchmove:  // 手指在屏幕上移动的时候触发

      3.touchend:  // 手指从屏幕上拿起的时候触发

      4touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详

   属性

      1.client / clientY：// 触摸点相对于浏览器窗口viewport的位置

      2.pageX / pageY：// 触摸点相对于页面的位置

      3.screenX /screenY：// 触摸点相对于屏幕的位置

      4.identifier： // touch对象的unique ID

12.删除代码内不必要的空白区和代码内的注释

 

手机网页不需要太多美化，修饰越多就会造成下载数据过多和时间过慢，还会增加用户流量费用，所以简要的修饰和清晰地结构才是最重要的。于是，运用好标题、列表项、换行等内容在收集网页中是很重要的。

 

手机网页设计注意事项和解决方法

不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS 代码不能指定像素宽度：width:xxx px;

只能指定百分比宽度：width: xx%;

或者width:auto;但是有的是需要固定宽度的。

相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {font: normal 100% Helvetica, Arial, sans-serif;}

上面的代码指定，字体大小是页面默认大小的 100%，即 16 像素。

h1 {font-size: 1.5em;}

然后，h1的大小是默认大小的1.5倍，即 24 像素（24/16=1.5）。

small {font-size: 0.875em;}

small 元素的大小是默认大小的0.875倍，即 14 像素（14/16=0.875）。

 

鼠标事件（mouseover）

考虑到触摸屏操作，用户无法用手指进行over的操作，因此应禁止在应用于移动设备访问的网页使用mouseover。

* UC浏览器相关（由于UC升级频繁 以下不支持的说法仅限于UC7.6以下版本）

UC浏览器相对于其他手机浏览器而言，对HTML标签和CSS属性存在有特殊的、自定义的处理方式。

在实际开发中，我们发现了UC浏览器对CSS存在一些“特殊照顾”：

不支持font-family属性，也就是说，在UC浏览器你只能看到一种字体；

不支持font-szie属性，也就是说，在UC浏览器你只能看到一样大小的字体；

不支持width、height、padding、margin、line-height属性，也就是说，在UC浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔；

不支持固定像素的宽度，100%显示页面，也就是说，在UC浏览器始终将看到的是“满屏的”；

不支持浮动、层叠布局，float和position属性无效，也就是说，在UC浏览器你只能看到“左对齐”。

支持background-color，但不支持background-image，也就是说不支持CSS背景图显示，在UC浏览器你只能看到背景色。