一:网页的一些标记

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. grid 布局(2)

    目录 grid 布局(2) grid区域属性 网格线名称 grid-template-areas 属性 grid-auto-flow 容器内子元素的属性 grid 布局(2) grid区域属性 网格线 ...

  2. C++->输入输出文件流的相关函数

    标准输入输出流与文件输入输出流的关系图: 文件输出流头文件“ofstream/fstream”,文件输入流头文件“ifstream/fstream” 1.1.打开文件方式:流类 对象名(文件名,方式) ...

  3. ubuntu下opencv CMakeLists.txt编写

    # 声明要求的 cmake 最低版本 cmake_minimum_required( VERSION 2.8 ) # 声明一个 cmake 工程 project( pro ) # 设置编译模式 set ...

  4. 内网hash传递

    前言: 我们在平常打点的时候,遇到有内网或者有域的环境的时候,我们只获得了内网中的一台机子的shell,由这台机子我们可以获得这台机子所在的网段的相关其他主机.比如说有域的时候的域控机,有多层内网的堡 ...

  5. Docker 使用记录

    1.Docker 镜像加载本地镜像 2.Docker 创建镜像: 创建dockerfile 文件: 进入到文件目录下: 输入命令 docker build -t xxxx . 注意:后面的小点要有, ...

  6. 0级搭建类008-Ubuntu Server Linux安装 (18.04.2) 公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  7. ECMAScript基本语法——⑤运算符 赋值运算符

    左边的变量等于等号左边的内容移到右边

  8. 莫凡_linux

    1.安装软件 2.基本命令ls和cd cd 指令 第一个要知道的指令就是怎么样去到你想去的地方. cd (Change Directory) 就是干这个的. 找到 Linux 的 terminal 窗 ...

  9. 常见通用框架的理解(Redis,Zookeeper,Thrift)

    redis 主要功能是内存版的Hashta zookeeper 主要功能是分布式中的全局变量. thrift  跨平台的Client和Server通信架构. taskengine用于启动定时任务和查看 ...

  10. 网络编程UDP、TCP详解

    网络编程   网络编程主要用于解决计算机与计算机(手机.平板-)之间的数据传输问题. 1.InetAddress(IP类)   方法: 方法 描述 getLocalHost() 获取本机的IP地址对象 ...