Reputation: 31
My page is not scaling to fit the viewport of mobile device even though I have put the meta tag:
<meta name="viewport" content="width=device-
width, initial-scale=1"> in the <head>.
When the page loads, the page is too large and does not fit the screen.
css for body is
body, html {
position: relative;
display: block;
height: auto;
width: 100%;
max-width: 1650px;
min-width: 400px;
min-height: 650px;
margin-left: auto;
margin-right: auto;
}
I would appreciate any help. Thanks!
Upvotes: 0
Views: 2006
Reputation: 1240
Try a media query with max-width: 100%
and min-width: 100%
property like this:
@media (max-width: 768px) {
body,html {
max-width: 100%;
min-width: 100%;
}
}
Upvotes: 2