CODEWITHSUNDEEP
htmlcssbrowsermobile
Sangam254
Sangam254

Reputation: 3483

Why does a horizontal scroll appear in mobile browser(iPhone)?

I have coded a html page as follows:

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Test</title>
 </head>
 <body bgcolor="#f2f2f2">

     <div style="width:1000px;height:auto;margin:0px auto;" ><!-- main container -->
         <div style="width:1000px;height:50px;margin:0px auto; background-color:pink;" ><!-- container 2 -->
           Hello world
          </div> <!-- end container 2 -->
     </div> <!-- end main container -->

 </body>
</html>

The width of the div is 1000px and it is center aligned using the property margin:0px auto; When I view this in the desktop browser, it is fine. But in a mobile browser(iPhone Safari), I get an unwanted horizontal scroll, also the entire page floats hrizontally and diagonally.

Why does this happen?

How can I fix this issue which is specific to iPhone/iPad browser. I have not tested in other mobiles.

What are the code I need to put in to make a mobile browser display a webpage(designed for desktop browser) properly?

Please suggest.

Thanks

Upvotes: 0

Views: 3270

Answers (3)

Sangam254
Sangam254

Reputation: 3483

Thank you for the suggestions provided.

A slight modification solved the issue.

<meta name="viewport" content="width=1000" />

This worked.

Upvotes: 3

Liam
Liam

Reputation: 1058

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

Try the above, instead. The content width is set to match that of the container div, and the max scale is removed to allow users to zoom in.

Upvotes: 0

Seven
Seven

Reputation: 391

Try to add this line to head section:

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

Upvotes: 1

Related Questions