Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #15532 > unrolled thread

How to initialize viewport exact size?

Back to article view | Back to comp.lang.javascript

Contents

  How to initialize viewport exact size? "A" <a@a.a> - 2012-08-23 23:04 +0200
    Re: How to initialize viewport exact size? SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-08-25 10:17 +0200

#15532 — How to initialize viewport exact size?

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

<body>
...
<img src="image.jpg" />
...

The above loads picture in mobile Safari but the problem is that it is 
double size than the original image. Original image is in screen resolution 
and should fit the screen from corner to corner (100%).

If I change initial scale to 0.5 then it is fine, but why is this so?
Shouldn't it be with initial scale 1 and width device width fill the screen 
as intented?

I am new to mobile HTML/Javascript (although I have experience with desktop 
variant) so go easy on the newbie :) 

[toc] | [next] | [standalone]

#15552

Le 23/08/12 23:04, A a écrit :
> ...
> <meta name="viewport" content="user-scalable=no, initial-scale=1,
> maximum-scale=1, minimum-scale=1, width=device-width;" />

which doctype ?

> <body>
> ...
> <img src="image.jpg" />

<img src="1.jpg" width="500px" style="max-width:98%" alt="">

no ?

> I am new to mobile HTML/Javascript

I think your problem has nothing to do with JavaScript.

Calling a special stylesheet if viewport width under 480px :

<link rel="stylesheet" type="text/css" media="only screen and 
(max-device-width: 480px)" href="small-device.css" />


ideas (in "normal" and general stylesheet) :

@media only screen and (max-device-width:640px),
        only screen and (max-width:640px) {
   body  {width: auto}
   img   {max-width:100%}
}


* landscape correction for iPhone */
@media (max-width:640px) and
        (orientation: landscape) and
        (-webkit-min-device-pixel-ratio:2) {
     body {
           -webkit-text-size-adjust: 70%;
           }
     }

issued from (in French) :
<http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html>
or in English :
<http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/>

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web