关于XHTML 1.0的四种DTD声明及WAP页面显示异常的解决办法

逍遥乐最近工作中在做相关的工作。所有元素均采用百分比。但是在手机浏览器上却显示的和电脑网站一样,非常狭小。没有和手机浏览器上。最后反复思考研究,终于发现罪魁祸首处在头部的html标记上。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

为了避免大家不会遇到同样的错误,特找出来专门分享给大家!不会再犯同样的错误

1.过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml 的写法)。
完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD  Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果使用第一个,为了能够再wap网页上正常显示,还需要在head上加上

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2.严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。
完整代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3. 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。
完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

4.适用于手机浏览器的DTD
完整代码如下:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">