一:网页的一些标记

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"?>

2.必须有DOCTYPE声明。在XML声明和<html>元素之间。
3.<html>、<head>、<link>、<title>、<body>标签要有,切完全闭合。
4.<p>元素,align属性已经去除,可以通过WAP CSS的text-align属性来设置。
5.若使用<meta/>标签,包含在<head>内
6.WAP浏览器如果不理解则忽略,比如添加作者:<meta name="author" content=“mark"/>
7.Cache Control:
  <meta/>标签的一个应用是控制XHTML MP文件在Cache中的存在周期:
  <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

wap网站开发小记(转载)的更多相关文章

  1. wap开发体会<转载>

    前二天因工作需要,上头要求做一个wap版的网站,到网上学习了一天,弄了个beta版出来(http://wap.luckty.com 功能很一般),整理几点经验如下: 1.wap网站用的是wml标识,非 ...

  2. Mysql 与 php动态网站开发 入门教程

    这个系列的教程由表单开始写,因为表单可以把数据库和web 之间的交互表现得很明显.提交表单 ,数据库记录注册信息. 本教程属于基础教程.大神请略过.        对于php和mysql之间的稳固性很 ...

  3. 常用网站开发类Firefox扩展插件 (转)

    作为一个 Web 开发人员,你几乎没有理由不喜欢Firefox,因为在Firefox下有很多专门针对开发的扩展插件,非常好用,这里就介绍一些常用的针对网站开发的FireFox扩展,供Web开发人员参考 ...

  4. 手机wap网站建设的方法和技巧

    随着互联网技术的不断进步,越来越多的运营商对于手机wap网站的建设有了更多的投入,手机wap网站的建设和开发要根据网站的特点和经营范围来进行设计和建设,这样才可以提升手机wap网站建设的效果.现在智能 ...

  5. 【PHP】Sublime下PHP网站开发指南

    Sublime下PHP网站开发指南 作者:白宁超 2017年3月16日11:03:17 摘要:随着单位开发项目的需求,关于政务办公多年来一直使用php开发管理平台.笔者早年asp开发经验算是有些帮助, ...

  6. NodeJS+Express+MySQL开发小记(2):服务器部署

    http://borninsummer.com/2015/06/17/notes-on-developing-nodejs-webapp/ NodeJS+Express+MySQL开发小记(1)里讲过 ...

  7. 【扫盲】HTML5、Web APP、3G网站、Wap网站傻傻分不清楚

           移动互联网指手机网站和app,其中app分为native app(原生app),web app(html5开发),Hybrid app(前两种app结合):手机网站分为wap网站和3g网 ...

  8. WAP网站的推广方式(自整合篇)

    WAP网站推广随着无线互联时代的到来,已经日益受到大家的重视.虽然WAP网站的目前盈利模式还不是很清晰,但WAP网站推广的竞争强度将肯定会越来越激烈,下面和大家一起探讨下WAP网站的推广方法. 方法/ ...

  9. sonn_game网站开发01:写在最前面

    之前做的个人博客项目,日向博客现在已经进入后期完善阶段了.是时候开始打造一个新坑了. 然而改造个什么坑呢?构思了好几天,想了好多方案,都觉得没啥动手欲望.因为,我想做的是那种,自己能用得上,而且有一定 ...

随机推荐

  1. Java同步和异步过程中消息语言国际化处理策略

    在Java后端做消息内容的语言国际化处理时可以通过Spring中MessageSource接口的来实现,但是MessageSource接口需要用到Locale对象, 而Locale类又是根据前端传过来 ...

  2. PTA 1001 A+B Format

    问题描述: Calculate a+b and output the sum in standard format -- that is, the digits must be separated i ...

  3. [CF1303B] National Project - 数学

    Solution \(2a>n\),一次性结束,直接输出 \(n\) \(a \geq b\),那么一直修即可,直接输出 \(n\) 否则,\(a\) 占弱势,我们考虑用 \(a\) 修一半需要 ...

  4. 回味Ubuntu10.10致敬Gnome桌面

    目录 Ubuntu10.10可用源 Ubuntu10.10更新语言包 输入法支持 浏览器选择 文件下载 压缩文件中文乱码的处理 视频播放 科学计算 搭建Lamp环境 实现文件分享 主题美化 Ubunt ...

  5. css3制作网页动画

    一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...

  6. java - 虚拟机性能监控与故障处理工具

    背景 在项目开发中往往不是一个人完成整个项目,而是由一个团队进行开发,而团队中成员的编程能力参差不齐难免会影响项目性能.当一个项目基本定型后难免会遇到项目产品使用的效果不理想例如长时间失去响应.系统卡 ...

  7. R语言函数化编程笔记2

    R语言函数化编程笔记2 我学过很多的编程语言,可以我写的代码很啰嗦,一定是我太懒了.或许是基础不牢地动山摇 1.为什么要学函数 函数可以简化编程语言,减少重复代码或者说面向对象的作用 2.函数 2.1 ...

  8. 4 Values whose Sum is 0 UVA 1152

    题目链接:https://vjudge.net/problem/UVA-1152 这题题意就是在四个集合内.每个集合分别里挑一个数a,b,c,d,求a+b+c+d=0有多少种选法. 暴力的话就是四重循 ...

  9. vjudge 最大公约数GCD 直接求最大共约束和最小公倍数的指令

    原题链接https://vjudge.net/contest/331993#problem/C 输入2个正整数A,B,求A与B的最大公约数. Input2个数A,B,中间用空格隔开.(1<= A ...

  10. IOU 选框和真实框重叠部分占两个总框并集的比例

    IOU 选框和真实框重叠部分占两个总框并集的比例 IOU 召回率:表示在预测为的正类中,有多少正类被预测为正类 https://blog.csdn.net/qq_36653505/article/de ...