CODEWITHSUNDEEP
cssmobilemedia-queries
fernandofleury
fernandofleury

Reputation: 125

Media query looks way different on Browser than Mobile Devices

Im porting a layout using this query:

@media screen and (min-width : 320px) and (max-width : 640px)

This is the url: http://www2.madeinweb.com.br/jobs/adc/prototype/html/

I was working only with the resized browser to begin with. but when I tried to check on mobile devices (iphone 4, 5, ipod 4 and galaxy S2), was drastically different, awfully different.

So I've started working focusing on the mobile view (it is a webview, so browse resizing its not a concern), but when I tried to view it from Galaxy S3, the result was pretty much the same from the browser (awful).

I know S3 is acting the way it should be (as far as i know), since its the same way as the browser, but what about the other devices, what am i doing wrong there?

Upvotes: 0

Views: 697

Answers (1)

DominicM
DominicM

Reputation: 6898

Mobile devices often scale content to fit the screen, you need to tell the device that the site is mobile friendly and not to scale pixels.

Add this in the head of your html file:

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

This should work for most android devices, iPhone may or may not need different meta tags.

Upvotes: 1

Related Questions