手机、平板电脑上展现网页

适配平板电脑网页技巧

最新推荐文章于 2025-09-25 13:47:20 发布

最新推荐文章于 2025-09-25 13:47:20 发布 · 216 阅读

文章标签：

#浏览器 #三星 #Android #Mobile #XHTML

平板电脑-网页专栏收录该内容

4 篇文章

订阅专栏

本文分享了针对Android 2.1系统平板电脑优化网页的实践经验，包括如何通过正确的文档类型声明防止页面自动缩放，调整CSS以适应移动设备显示特点。

[size=large][color=black][b]关键词：手机, Adroid2.2, 平板电脑, 浏览器, mobile safari[/b][/color][/size]
[size=large]最近给平板电脑做页面，经历了一番探索，搞定了。[/size] :D
[size=large]下面来说说我的解决方案。 [/size]

[b]
测试设备：
GT-P1000 三星平板电脑（其实为大号手机 :D ）
操作系统：android2.1
浏览器：Mobile Safari/533.1
User Agent打印结果：
Mozilla/5.0 (Linux; U; Android 2.1; zh-cn; GT-P1000 Build/FROYO) AppleWebKit/533
.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
[/b]

[color=green][size=medium]1. 在jsp页面顶上增加以下文档类型声明：[/size][/color]

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

[size=medium]
如果不加上文档类型声明的话，在浏览器里打开页面后，页面会根据移动设备屏幕的大小自动缩放页面，并且当点击输入框时，页面会自动放大，特别难看。加上声明之后，页面会展现原始大小，手指也可以拖动屏幕进行页面放大。

2. 普通的网页字体大小，在移动设备浏览器上看到的效果是字体变小
所以css的字体大小要做大一点。[/size]

我是研究了雅虎移动版的网站：
[url]http://hk.m.yahoo.com/[/url]