wap网站开发小记(转载)
一:网页的一些标记
1:声明
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
2:<metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
viewport浏览器窗口
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
3:<metaname="format-detection" content="telephone=no"/>
该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。
在 iPhone 上默认值是:
<meta name="format-detection" content="telephone=yes"/>
如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:
<meta name="format-detection" content="telephone=no"/>
二:firefox调试wap页面
User Agent Switcher
https://addons.mozilla.org/zh-CN/firefox/addon/user-agent-switcher/
伪装手机浏览器的利器
wmlbrowser
https://addons.mozilla.org/zh-CN/firefox/addon/wmlbrowser/
这是一款在FireFox浏览器上显示WML页面的插件,用来浏览手机网站 wap浏览
三:编写页面的一些注意事项
1.XML声明和字符编码:<?xml version="1.0" encoding="UTF-8"?>
5.若使用<meta/>标签,包含在<head>内
6.WAP浏览器如果不理解则忽略,比如添加作者:<meta name="author" content=“mark"/>
7.Cache Control:
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=0"/>
注意:与设备相关。一些使用不相的方法,一些没有Cache机制。还有一些不支持<meta/>但识别Cache-Control:no-cache的
HTTP头。也可应用于图片的缓存。
四:手机版网站起码要实现一些基本的功能
1.页面的适用性问题。对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用 12px或14px,那么,不一样的终端的效果差别会很大。所以这里,最好让网页的宽度自适应屏幕,还好,w3c在设计html的时候为我们考虑了这一 点,只需一句话,就可以搞定,就是加上<meta name="viewport" content="width=device-width"/> 对于字体的话,我们就用em或ex为单位就好
2.版本制作问题。移动页面往往针对不同的手机设置不同的版本,一般有精简版,标准版,3G版,触屏版,智能手机版等等,这些除了在页面设计上有不同外, 页面语言也会不同的。精简版采用wap 1.0 的wml脚本编写,这个通用性以前很强,很多国产手机都支持这个语言的,但这个语言是很精简的。标准版的一般可以采用wap 2.0技术,对应的脚本语言是xhtml mp(xhtml mobile profile),这个语言是xhtml的子集,这个并且支持大部分的css,基本上和电脑版的差不多,但一般不能用js,这是考虑到这些手机是不支持 js的。对于智能手机版,由于现在的智能手机都支持js,这个版本的制作上就简单多了,不过,又由于大部分智能手机(基本上除去塞班手机,包括 Android,ios,wp7等)都支持Html5,因此,智能手版可以采用html5来制作。
3.版本控制问题。可能这部分是比较不好解决的,怎么智能判断手机的最佳版本并跳转,可以从这几个方面考虑。一方面,可以想办法得到手机的操作系 统,比如,Android的,ios的,就可以跳转到html5版了,windows系统,毫无疑问电脑版,获得手机系统,可能通过得到手机型号,现在的 方法是通过浏览器的UA(user agent),获得手机的一些信息,简单一点的,直接可以通过UA判断手机的制造产商。要想获得更多的信息,就得有一个数据库,因为不同手机型号会有不一 样的UA信息,世界上的手机有很多,自己要想做一个这样的数据库还是很难的,不过,已经有人为我们做好了这样的数据库,或者更方便的,做好了一个识别手机 适用最佳版本的函数库,这里我推荐用Wurfl。另一方面,可以通过页面的脚本来判断浏览器对js和html5的支持,代码如下
如果你仅仅想开发一个版本,只是判断一下是不是移动客户端,这里引用一段discuz! x2的代码
4.手机版本的大小问题。一般来说,对于精简版和普通版的手机网页,我们是做得越精简越好,能省的代码最好省去,毕竟现在手机流量对用户来说还是很宝贵 的。比如元素命名,一般页面少的话,命名越短越好,css最好写在一行。css中,有些元素是继承父类的样式的,不用重复定义,善用默认值。
5.浏览器缓存。如果再更新不快的情况下,最好开启浏览器缓存
参考:http://www.iteye.com/topic/1120915
最新文章
- SQL Server 进制转换函数
- jQuery插件开发(溢出滚动)
- 控制台手动编译Qt5程序
- table的遍历
- es6新特性(一)
- 【leetcode】String to Integer (atoi)
- liunx下安装MYSQL时需要安装的相关软件的作用
- 使用POI导入Excel异常Cannot get a text value from a numeric cell 解决
- php 魔术方法
- 简单图片banner轮播
- C++中输出流运算符的重载
- Jsvc安装,配置 常规用户使用tomcat的80端口
- smarty 截取字符串,调用php中的方法,foreach循环
- 基于visual Studio2013解决C语言竞赛题之0611素数排序
- JDBC事务和JTA事务的区别
- springboot2.0 redis EnableCaching的配置和使用
- C# Winform继承窗体打开设计器白屏的一例解决方法
- linux centos 7上运行teamviewer与找不到ID问题处理办法
- HTML5 本地文件操作之FileSystemAPI简介
- Mirror--程序访问镜像数据库的超时机制
热门文章
- SP7258 SUBLEX - Lexicographical Substring Search - 后缀自动机,dp
- 前端-2019 history 与 location
- Magento2 观察者模式 之 插件
- codeforces每日一题1-10
- [CF1303C] Perfect Keyboard - DFS
- linux C++ 读取mysql结果保存
- C++->;List的使用注释
- webpack打包后不能调用,改用uglifyjs打包压缩
- 仿ios按钮切换
- Web Workers - (Worker(专有) and SharedWorker(共享))