WAP项目开发总结

本文分享了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" />

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值