CODEWITHSUNDEEP
javascripthtmlcssjquery-mobilemobile-browser
Sunita Parab
Sunita Parab

Reputation: 127

Can we use different CSS for different mobile browsers?

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?

Upvotes: 2

Views: 282

Answers (3)

Mentor
Mentor

Reputation: 1003

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?

Upvotes: 1

st.eve
st.eve

Reputation: 114

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

Upvotes: 1

NelusTheNerd
NelusTheNerd

Reputation: 93

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.

Upvotes: 0

Related Questions