当前位置： 正文

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

建站技术 2014-05-14

关于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  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">
赏