WAP项目开发总结

最新推荐文章于 2024-11-04 10:32:57 发布

转载最新推荐文章于 2024-11-04 10:32:57 发布 · 1.1k 阅读

wap 专栏收录该内容

1 篇文章

订阅专栏

本文分享了WAP网站开发过程中的实用技巧，包括文本框键盘类型设置、input元素提示文字处理、页面样式分工及适配不同设备尺寸的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个WAP网站，其中遇到了一些细节点，现整理与总结一下：

基于WebKit核心的浏览器包含Android Google Chrome, IOS safari，所以要想做一个兼容性好的WAP网站，需要对WebKit做一个了解。

http://www.w3school.com.cn/html5/html_5_form_input_types.asp

1.聚焦到文本框时，会弹出的键盘，这时大写键会自动打开，解决办法<textarea name="" autocapitalize="off"></textarea>

2.聚焦到输入电话号码的文本框时，需要直接弹出数字键盘。<input type="tel" name="telphone_num" value="" />

3.聚焦到输入email的文本框时，需要直接弹出书写email键盘。<input type="email" name="email" value="" />

4.为input框加入文字提示。<input type="text" placeholder="用户名/邮箱/已验证手机号" name="userInput" class="common-input" id="userInput">，这里，iphone4的safiri有个问题，就是当由竖屏转横屏后，再转竖屏，就会出现问题，这时，需要在input外容器加一个overflow:hidden

5.在页面分工上，需要使开发人员先设计页面框架(头、尾、布局模板(左右结构等))，对各个页面做单独的页面样式的编写并做上注释。避免相互引用样式，当修订一个页面样式时，导致其它页面的样式受牵连；

6.在美工制作效果图时，如果不按指定的尺寸做效果图的话，前端开发人员要对页面进行等比例缩放，有时页面元素会失真；

7.设计WAP页面时，最好采用固定宽度(该宽度根据WAP的受众而得。例如320px/480px)，高无限的做法。否则宽度设置偏大，在进入页面编辑框时，会就还原页面尺寸，必需手工做一下缩放操作，非常别扭；

8.为WAP站点设立二级域名；m.xxxx.com

9.根据屏幕大小做页面的自适应(media query)；

也就是说，可以根据屏幕的尺寸选择相应的样式文件

例如：前2个针对Android，后2个针对于Iphone

<link  rel="stylesheet" type="text/css" media="only screen and (max-device-width:640px)"  href="themes/default/css/css_full_320.css" />
<link  rel="stylesheet" type="text/css" media="only screen and (min-width: 640px) and (max-device-width:1000px)" href="themes/default/css/css_full_480.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="themes/default/css/css_full_320.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width:1000px)" href="themes/default/css/css_full_480.css" />