CODEWITHSUNDEEP
cssiphonetwitter-bootstrap
Rubyx
Rubyx

Reputation: 798

Boostrap Simple Page not responsive on mobile device

My simple bootstrap page is not responsive on my iphone, but it is with google chrome on my computer.

Zoom is not good on iphone and this is my viewport :

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

Screenshot iphone : iphone

Screenshot chrome : chrome

If someone can help me,

Thanks

Upvotes: 0

Views: 127

Answers (2)

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

According the documentation, you are making your website like a native app which is not recommended by them. if that's the case, You are omitting a couple of attributes .

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

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

so if you don't want the native app like website, you can just go for this: 

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

try this: instead of 1.0 put 1 for initial scale;

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

Upvotes: 1

Henrique Schreiner
Henrique Schreiner

Reputation: 185

Try to use this meta tag, instead:

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

Upvotes: 0

Related Questions