[英]How to have my web application render using different stylesheet on mobile device browser?
I've got a Java web application running, when accessing via a mobile device (such as safari browser on an iPhone) the JSP page renders poorly. 我有一个Java Web应用程序正在运行,当通过移动设备(例如iPhone上的safari浏览器)访问时,JSP页面渲染效果不佳。 The device screen is not suitable for the page and therefore I'm looking for a way to get around this 设备屏幕不适合页面,因此我正在寻找一种方法来解决这个问题
After some Googling, I've come across the following line that can be added to a JSP 经过一些谷歌搜索,我遇到了可以添加到JSP的以下行
<link href="/css/global.css" rel="stylesheet" type="text/css" media="handheld" />
Is this a sufficient way of ensuring a web application can work on both desktop and mobile browsers, or have I overlooked this completely? 这是确保Web应用程序可以在桌面和移动浏览器上运行的充分方法,还是我完全忽略了这一点?
I've been advised to have a look to see what Spring MVC has available to use, but I think that could possibly be a red-herring piece of advice as the above would be simpler 我被建议看看Spring MVC可以使用什么,但我认为这可能是一个红色的建议,因为上面会更简单
Spring MVC offers a very easy way to change "Themes" on the fly based on the HttpServletRequest - so you could conceivably have a standard Theme and then another "handheld" Theme which is activated based on the user-agent. Spring MVC提供了一种基于HttpServletRequest动态更改“主题”的简单方法 - 因此您可以想象有一个标准主题,然后是另一个基于用户代理激活的“手持”主题。
The Spring MVC library then allows you to use different CSS files, different whatever, in your view layer based on the current request's theme. 然后,Spring MVC库允许您根据当前请求的主题在视图层中使用不同的CSS文件。 However if you aren't currently using Spring MVC it may not be worth the hassle to migrate your application to it. 但是,如果您当前没有使用Spring MVC,那么将应用程序迁移到它可能不值得。
On the other hand, you could simply have your JSP render a different <link>
tag based on the user-agent to use different CSS files based on conditional logic. 另一方面,您可以简单地让JSP基于用户代理呈现不同的<link>
标记,以基于条件逻辑使用不同的CSS文件。 If your application is architected well and you have the logic about setting HTML headers and the CSS includes in a single place, it should be easy enough to add this logic in just one place and have it apply everywhere. 如果你的应用程序架构得很好并且你有关于设置HTML头文件和CSS包含在一个地方的逻辑,那么在一个地方添加这个逻辑应该很容易并且适用于所有地方。
Just specify the both styles. 只需指定两种样式。 The client knows perfectly which one to choose based on the media type . 客户端根据媒体类型完全知道选择哪一个。 Indeed use handheld
for mobiles (at least, the devices with a 300~400px wide screen). 确实使用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">
You see, it's also able to add a specific stylesheet for printing devices. 你看,它还能够为打印设备添加特定的样式表。 This is often overlooked as well. 这通常也被忽视了。
css media queries do what you want 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">
CakePHP has similar functions to handle request based on the HTTP headers user-agent. CakePHP具有类似的功能来处理基于HTTP头用户代理的请求。 You can delegate an entire website to a different view. 您可以将整个网站委派给不同的视图。
http://book.cakephp.org/view/1292/Obtaining-Request-Information http://book.cakephp.org/view/1292/Obtaining-Request-Information
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.