CODEWITHSUNDEEP
htmlcssresponsive-designmeta-tagsviewport
Kane
Kane

Reputation: 909

Why does the meta "viewport" tag make my page looked zoomed in on Android device?

I'm trying to make my site more "responsive" on mobile devices.

http://healthybodyguru.com

I've tried a lot of variations of the "viewport" meta tag, which is currently:

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

But for some reason on my HTC Vivid, the page loads quite zoomed in:

HTC Vivid Screeny

Any ideas how I can adjust the viewport so the page is 100% visible on my Android?

Upvotes: 0

Views: 1268

Answers (3)

aftab
aftab

Reputation: 1141

This code is working for me great ... I hope it will work for you too ... 

// fit the width of screen
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

Upvotes: 0

Linus Caldwell
Linus Caldwell

Reputation: 11058

Maybe try something like this:

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

I'm still trying to understand the viewport to be honest. But I think, I maybe got it now. The viewport width should be set to the default viewable width of the content. For example: If you just have an <img/> with width: 320px, than the image will be fullscreen if you use the code above.

Upvotes: 1

Ian
Ian

Reputation: 174

initial-scale=1

Is causing it to load zoomed in. You can either remove it, or replace it with maximum-scale or minimum-scale (for whatever you're trying to achieve).

Upvotes: 0

Related Questions