5

I'm trying to display an image (320x480px) in a webpage on android. I'm trying to configure the viewport meta cause I want the image displayed in full screen.

Actually I simply configured the viewport like that 

<meta name="viewport" content="width=320px" />

and it's working perfectly, except with the android default browser. I tried Chrome, Opera and Firefox, and they all display the image correctly.

Regarding this post Full webpage and disabled zoom viewport meta tag for all mobile browsers I tried to configure it in this way without success : 

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

or 

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=320,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

Do you have any idea on how to configure the viewport correctly ?

Thank You

Community
  • 1
  • 1
lnki
  • 411
  • 1
  • 4
  • 9

4 Answers4

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

user-scalable - controls wither the user can "pinch-to-zoom".

width - the width of the viewport.

All of the attributes require integer values, NOT floating point values.

In other words, 1 and not 1.0. Or you could use percentage.

There is no point in setting min and max scaling attributes to the same value. Also, initial-scale is known to cause problems in iOS if set to 1.

Aternus
  • 3,375
  • 1
  • 14
  • 9
  • According to android documentation it is a float and not an integer: https://developer.android.com/guide/webapps/targeting.html#Viewport – Preston Badeer Jan 21 '14 at 16:30
0

I tried the below one. It works perfectly for me.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
Abhijit Kurane
  • 834
  • 15
  • 20
0

I like:

<meta name="viewport" content="width=device-width, initial-scale=1"/>
stackuser83
  • 2,012
  • 1
  • 24
  • 41
0
<meta name="viewport" content="width=321; user-scalable=no;" />

Android only accepts viewport widths GREATER than 320, so setting it on 321 did the trick for me.

user3355177
  • 1
  • 1