Можем ли мы использовать разные CSS для разных мобильных браузеров?

Question

Я разработал веб-сайт с помощью WordPress. Он выглядит красиво. Но в некоторых мобильных браузерах он разбивает некоторые CSS. В Opera Mini его не принимали Margin:-30px;, но на мобильных хромах его работала. Я не знаю, почему эта проблема происходит. Можете ли вы, ребята, дать мне какое-нибудь предложение? Я просматриваю некоторые другие крупные сайты, такие как mashable.com, и у них такая же проблема.

Итак, мой вопрос: могу ли я использовать разные CSS для разных мобильных браузеров? Или я могу использовать совершенно разные макеты для разных мобильных браузеров?

Answer 1

Нет необходимости в JS. Существуют менее известные функции CSS, которые применяют CSS на основе браузера. Некоторые считают их css-хаками.

Firefox:

@-moz-document url-prefix() { CSS DECLARATIONS }

Или поставить это перед конкретной декларации:

body:not(:-moz-handler-blocked) .whateverclass { CSS }

Для IE вы можете загрузить отдельные таблицы стилей:

<!--[if IE]> 
 
\t <link rel="stylesheet" type="text/css" href="ie_sheet.css" /> 
 
<![endif]-->

Сафари & хром

@media screen and (-webkit-min-device-pixel-ratio:0) { CSS DECLARATIONS}

Сафари:

html[xmlns*=""]:root .whateverclass { CSS }

ли, что ответ на ваш вопрос?

Answer 2

Отключить тему: Для некоторых браузеров требуется префикс для размещения перед новой функцией CSS. http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm Таким образом активируется новая функция.

По теме: Я сам нашел что-то полезное. Detecting a mobile browser Это сообщение об обнаружении мобильного браузера. Возможно, если вы измените эту функцию js, вы получите то, что вам нужно.

Answer 3

Запросы несут user agent string, который идентифицирует используемый браузер. Чтение этой строки с помощью useragent = navigator.userAgent и адаптация вашей таблицы стилей в зависимости от ее значения на самом деле довольно распространены.

Смотрите также window.navigator.userAgent