CODEWITHSUNDEEP
androidiphonemobileresponsive-design
Jon Chubb
Jon Chubb

Reputation: 29

Responsive site scaled to 200% on mobile

EDIT:

Having tested further on a number of devices and included a graphic ruler to measure the screen it seem the whole site is being scaled to 200%. I tried adding maximum-scale=1 to the viewport meta tag but this only prevents zooming, not the initial scale which is already supposed to be 1. Also tried reducing the inital scale below 1 but it makes no difference. NB: zoom is off the iphone general settings.

On our new responsive iste we have a google doubleclick banner 300px X 75px. The iphone4 screen (chrome, sarafri) I'm testing on has a resolution of 640x960 yet the banner is signifcantly wider than 300px. Just checked on a nexus (chrome) and it is also larger than it should be. On a destop it displays at the correct size so I dont think there's any media queries scaling it up.

I've included the meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

Any thoughts on why its larger than it should be would be greatly appreciated!

It appears as the screenshot below:

Upvotes: 1

Views: 655

Answers (1)

JellyFishBoy
JellyFishBoy

Reputation: 1798

The iPhone 4 display has four times the number of pixels as that of the original iPhone. To prevent mobile sites from looking tiny, it magnifies them by 200%.

What file type are you exporting the banner as? iPhone's generally don't like bitmap images and even sometimes HTML5 canvas.

Have you tried setting the maximum scale and prevent user scaling? Your descriptions states the maximum scale has been set, yet the code you supplied says minimum?

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

Upvotes: 2

Related Questions