CODEWITHSUNDEEP
htmlcssmedia-queries
Beqa
Beqa

Reputation: 99

Device screens @media queries

I have media query in CSS: 

@media only screen and (max-device-width: 480px) and (min-device-width: 320px)

When I open elements inspector in Google Chrome and select device iPhone 4, it shows different from the original iPhone 4s screen and some other phone screens.. Why? What do I do wrong?

How can I see the iPhone 4's original look of the page in my Google Chrome or other browsers? Is there any solutions?

How it looks on iPhone 4: How it shows in iPhone 4

How it shows in Google Chrome, when I select device iPhone 4 (on the top left): how it shows in Google Chrome, when I select device: iPhone 4 (on the top left)

Upvotes: 1

Views: 72

Answers (2)

Beqa
Beqa

Reputation: 99

I fixed my problem by adding a <meta> viewport tag to <head>

<meta name="viewport" content="width=device-width,initial-scale=1">

Now I don't have to use (max-device-width: 480px) and (min-device-width: 320px)

(max-width: 480px) and (min-width: 320px) <- work fine for all devices

Anyway, thank you all for your response.

Upvotes: 0

dippas
dippas

Reputation: 60563

instead 

(max-device-width: 480px) and (min-device-width: 320px)

use only

(max-width: 480px) and (min-width: 320px)

Why?

min/max-width

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

min/max-device-width

Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.

Upvotes: 1

Related Questions