CODEWITHSUNDEEP
htmlcssviewport
Tai
Tai

Reputation: 11

viewport doesn't work correctly

I'm in trouble with setting 100% width for body when I brows the page with smart phone.
viewport setting is 

meta name="viewport" content="width=device-width"

console shows the sizes like

screen.width= 320
screen.availWidth= 320
window.innerWidth= 975
window.outerWidth= 320
$(window).width()= 320
document.documentElement.clientWidth= 320
document.width= 975 $(document).width()= 975
$('body').width()= 970

and I added 'width:975px' to body's css.
Then console shows the sizes below

screen.width= 320
screen.availWidth= 320
window.innerWidth= 977
window.outerWidth= 320
$(window).width()= 320
document.documentElement.clientWidth= 320
document.width= 977
$(document).width()= 977
$('body').width()= 975

I want to set body's width same as document's width.
Would someone know how I can fix this?

Upvotes: 1

Views: 770

Answers (2)

Donnie Rock
Donnie Rock

Reputation: 525

Try defining initial-scale and maximun-scale

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

And reset margins and padding in the body in your css:

html,body{margin:0, padding:0}

Upvotes: 0

nevos
nevos

Reputation: 927

Did you try using the meta tag with the 'initial-scale' property?

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

Upvotes: 0

Related Questions