Reputation: 5946
I'm trying to write a login-form for my application with html and css.
in my css I'm using @media
-queries:
@media (max-width: 767px){
body {
font-size: 25px;
}
... and some more
}
so in a resolution more than 767px it looks like this:
when I resize to a resolution lower than 767px it looks like this (all bigger, no box with shadow etc.):
then, I change to device view in Google Chrome with
I switch to iPhone 5
with a resolution of width:320px
and height:568px
and the result looks like this (like the one bigger than 767px):
shouldn't it look like the result lower than 767px?
Upvotes: 2
Views: 400
Reputation: 1586
Add the viewport tag in your head like:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More about the viewport:
Upvotes: 2