Question

我已经运行了一个Java Web应用程序，当通过移动设备（例如iPhone上的safari浏览器）访问时，JSP页面渲染效果不佳。设备屏幕不适合页面，因此我正在寻找一种方法来解决这个问题

经过一些谷歌搜索后，我遇到了可以添加到JSP的以下行

<link href="/css/global.css" rel="stylesheet" type="text/css" media="handheld" />

这是确保网络应用程序可以在桌面浏览器和移动浏览器上运行的充分方法，还是我完全忽略了这一点？

我被建议看看Spring MVC可以使用什么，但我认为这可能是一个红色的建议，因为上面会更简单

Answer 1

Spring MVC提供了一种基于HttpServletRequest的change "Themes" on the fly非常简单的方法 - 所以你可以想象有一个标准的主题，然后是另一个基于用户代理激活的“手持”主题。

然后，Spring MVC库允许您根据当前请求的主题在视图层中使用不同的CSS文件，不同的任何文件。但是，如果您当前没有使用Spring MVC，那么将应用程序迁移到它可能不值得。

另一方面，您可以让JSP基于用户代理呈现不同的<link>标记，以基于条件逻辑使用不同的CSS文件。如果你的应用程序架构得很好并且你有关于设置HTML头文件和CSS包含在一个地方的逻辑，那么在一个地方添加这个逻辑并让它适用于所有地方应该很容易。

Answer 2

只需指定两种样式即可。客户端根据media type完全知道要选择哪一个。确实使用handheld用于移动设备（至少是宽屏幕为300~400px的设备）。

<link rel="stylesheet" href="css/global.css" media="screen,projection">
<link rel="stylesheet" href="css/mobile.css" media="handheld">
<link rel="stylesheet" href="css/print.css" media="print">

您可以看到，它还可以为打印设备添加特定的样式表。这也经常被忽视。

Answer 3

css媒体查询做你想做的事情

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

Answer 4

CakePHP具有类似的功能来处理基于HTTP头用户代理的请求。您可以将整个网站委派给不同的视图。

http://book.cakephp.org/view/1292/Obtaining-Request-Information

如何在移动设备浏览器上使用不同的样式表呈现我的Web应用程序？

4 个答案: