Как сделать так, чтобы мое веб-приложение отображалось с использованием другой таблицы стилей в браузере мобильного устройства?

Question

У меня запущено веб-приложение на Java, при доступе через мобильное устройство (например, браузер Safari на iPhone) страница JSP отображается плохо.Экран устройства не подходит для этой страницы, и поэтому я ищу способ обойти это

. После некоторого поиска в Google я наткнулся на следующую строку, которую можно добавить в JSP

.

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

Является ли это достаточным способом обеспечения того, чтобы веб-приложение могло работать как в настольных, так и в мобильных браузерах, или я полностью упустил это из виду?

Мне посоветовалиПосмотрите, что Spring MVC может использовать, но я думаю, что это может быть совет для красной сельди, так как вышеприведенное будет проще

Answer 1

Spring MVC предлагает очень простой способ изменять «Темы» на лету на основе HttpServletRequest - так что вы можете иметь стандартную тему, а затем другую «портативную» тему, которая активируется на основеuser-agent.

Затем библиотека Spring MVC позволяет использовать разные CSS-файлы, независимо от того, что они есть, в вашем слое представления на основе темы текущего запроса.Однако, если вы в настоящее время не используете Spring MVC, возможно, не стоит тратить время на перенос приложения в него.

С другой стороны, вы можете просто заставить свой JSP отображать другой тег <link> на основепользовательский агент для использования различных файлов CSS на основе условной логики.Если ваше приложение хорошо спроектировано и у вас есть логика настройки заголовков HTML и CSS-элементов в одном месте, должно быть достаточно просто добавить эту логику в одном месте и применять ее везде.

Answer 2

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 3

Просто укажите оба стиля. Клиент прекрасно знает, какой из них выбрать, основываясь на типе . Действительно, используйте handheld для мобильных устройств (по крайней мере, для устройств с широким экраном 300 ~ 400 пикселей).

<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 4

CakePHP имеет аналогичные функции для обработки запросов на основе пользовательского агента заголовков HTTP.Вы можете делегировать весь сайт другому представлению.

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