CODEWITHSUNDEEP
iphonehtmlcssmobilewidth
menardmam
menardmam

Reputation: 9986

Browser width not 100% on iPad and iPhone, the rest is ok

For testing purpose i setup this page : http://www.fondationmartinmatte.com/test.html it's pretty fine in html desktop browser, but in mobile there is always a vertical grey bar from hell remaining. where it come from and what setting should i tell the html code to use for mobile. First there was that code : <meta name="viewport" content="width=device-width">that make the whole thing worst. i just delete it, and here is the grey bar. how to fix that, thanks in advance

Upvotes: 3

Views: 8699

Answers (2)

Vexter
Vexter

Reputation: 1172

Try using these:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

Also, you might want to get a more sophisticated CSS reset than what you currently have (margin: 0, padding: 0). There are some great ones here to make your life easier when it comes to browser compatibility:

http://www.cssreset.com/

Upvotes: 12

Last1Here
Last1Here

Reputation: 1079

This scales your website to the device

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

The two lines below are for when a user adds your website to the homepage of their iOS device. First line is for when they click the icon added it will not open in safari, the second line defines the status bar (bar with battery indicator and time) colour when they open your website from their homepage.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

More information here : http://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

Upvotes: 3

Related Questions