[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]
[size=medium]
如果不加上文档类型声明的话,在浏览器里打开页面后,页面会根据移动设备屏幕的大小自动缩放页面,并且当点击输入框时,页面会自动放大,特别难看。加上声明之后,页面会展现原始大小,手指也可以拖动屏幕进行页面放大。
2. 普通的网页字体大小,在移动设备浏览器上看到的效果是字体变小
所以css的字体大小要做大一点。[/size]
我是研究了雅虎移动版的网站:
[url]http://hk.m.yahoo.com/[/url]
[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]