2

I have developed a website using WordPress It's look nice. But on some mobile browsers its breaking some CSS. In Opera Mini its not taking Margin:-30px;but on mobile chrome its working. I don't know why this problem is happening. Can you guys give me some suggestion? I browse some other big websites like mashable.com and they have the same problem.

So my question is can I use different CSS for different mobile browsers? Or can I use totally different layout for different mobile browsers?

ketan
  • 19,129
  • 42
  • 60
  • 98
Sunita Parab
  • 107
  • 1
  • 2
  • 13

3 Answers3

1

Requests carry an user agent string which identifies the browser in use. Reading this string with useragent = navigator.userAgent and adapting your stylesheet depending on its value is pretty common, actually.

See also window.navigator.userAgent

st.eve
  • 114
  • 1
  • 4
  • If your intention is to create fragile code that constantly needs updating, then browser detection by UA string is the ticket. There are thousands of different strings, with new browsers and versions being released all the time, should the OP keep testing and updating every day? week? month? – RobG Apr 20 '15 at 09:16
  • Thanks for the information st.eve, but can you give simple example to know how to use them? Thank You for your reply... – Sunita Parab Apr 20 '15 at 11:23
  • @SunitaParab You can find an example in the answer to [this](http://stackoverflow.com/questions/13802639/load-a-javascript-file-and-css-file-depending-on-user-agent) question. – st.eve Apr 21 '15 at 12:44
1

No need for JS. There are lesser known CSS features that apply CSS based on browser. Some consider them css hacks.

Firefox:

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

Or put this in front of a specific declaration:

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

For IE you can load separate stylesheets:

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

Safari & chrome

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

Safari:

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

Does that answer your question?

Mentor
  • 965
  • 9
  • 21
0

Off topic: Some browser require a prefix to be placed before a new CSS feature. http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm This way the new feature is activated.

On Topic: I myself found something that could be helpfull. Detecting a mobile browser This is a post about detecting a mobile browser. Maybe if you moddify this js function you will get what you need.

Community
  • 1
  • 1
NelusTheNerd
  • 93
  • 1
  • 6