cordova-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Stephan Wezel <s.we...@web.de>
Subject Re: iOS webview size
Date Fri, 06 Dec 2013 17:17:57 GMT
Or you could use following code to do the scaling automatically if needed

var devicePixelRatio = window.devicePixelRatio || 1,
    backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio || 1;

ratio = devicePixelRatio / backingStoreRatio;
if (devicePixelRatio !== backingStoreRatio) {
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;
    canvas.width = oldWidth * ratio;
    canvas.height = oldHeight * ratio;

    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';

    // now scale the context to counter
    // the fact that we've manually scaled
    // our canvas element
    ctx.scale(ratio, ratio);
}

if you set the size of the canvas element to the screen/window size and using above code you
will get on any resolution a sharp display

I'm using above code successfully with cordova on iOS and Android (e.g. on a Nexus 4 the ratio
is 1.5 instead of 2 on iPhone with retina display)

Stephan

On Friday 06 December 2013 11:48:39 Ian Clelland wrote:
> Yes, if we're actually talking about the HTML <canvas> element, then it's
> default resolution will match the element's size *in CSS pixels*, which are
> twice the size of device pixels on a retina display.
> 
> You need to set the element's "width" and "height" attributes (*not* the
> CSS properties) to increase that resolution.
> 
> A full-screen hi-res canvas on an iPhone 4 would look like this:
> 
>     <canvas style="width: 320px; height: 480px;" width="640"
> height="960"></canvas>
> 
> (and, of course, those numbers would be different on an iPhone 5, or an
> Android device :) )
> 
> Ian
> 
> 
> On Fri, Dec 6, 2013 at 11:40 AM, Michal Mocny <mmocny@chromium.org> wrote:
> 
> > Yeah if you don't have correct viewport, and are using the 3.5 inch retina
> > iphone simulator, you will get 2 device pixels per css pixel, and thus see
> > the resolution you claim.
> >
> > Also, even if you fix the viewport, I think that for efficiency reasons
> > some web renderers will specifically treat the canvas element as lowdpi
> > even on a highdpi device.  I do not know the details of safari webview, but
> > thats worth exploring if viewport doesn't fix the issue.  One quick article
> > I found that generally explains things to consider when working with canvas
> > on highdpi is: http://www.html5rocks.com/en/tutorials/canvas/hidpi/
> >
> >
> > On Fri, Dec 6, 2013 at 10:54 AM, Andrew Grieve <agrieve@chromium.org>
> > wrote:
> >
> > > Problem with viewport <meta> tag?
> > >
> > >
> > > On Fri, Dec 6, 2013 at 10:07 AM, James Jong <wjamesjong@gmail.com>
> > wrote:
> > >
> > > > Are you targeting prior to iOS 5?
> > > > -James Jong
> > > >
> > > > On Dec 6, 2013, at 9:49 AM, Maxime LUCE <Maxime@somatic.fr> wrote:
> > > >
> > > > > By default, Cordova ios project targets iOS 5+, could it be blocking
> > ??
> > > > >
> > > > >
> > > > > Cordialement.
> > > > >
> > > > >
> > > > > Maxime LUCE
> > > > >
> > > > >
> > > > > maxime@touchit.fr
> > > > > 06 28 60 72 34
> > > > > http://touchit.fr
> > > > >
> > > > >
> > > > > -----Original Message-----
> > > > > From: mmocny@google.com [mailto:mmocny@google.com] On Behalf Of
> > Michal
> > > > Mocny
> > > > > Sent: vendredi 6 d├ęcembre 2013 15:45
> > > > > To: dev
> > > > > Subject: Re: iOS webview size
> > > > >
> > > > > 320 sounds like the width of the first three generations of iphone
> > > > (though the height is not 240 but 480).  Perhaps you are emulating an
> > > older
> > > > device?
> > > > >
> > > > >
> > > > > On Fri, Dec 6, 2013 at 9:28 AM, Maxime LUCE <Maxime@somatic.fr>
> > wrote:
> > > > >
> > > > >> Frame is fullscreen but frame content is sized
> > > > >>
> > > > >>
> > > > >> Cordialement.
> > > > >>
> > > > >>
> > > > >> Maxime LUCE
> > > > >>
> > > > >>
> > > > >> maxime@touchit.fr
> > > > >> 06 28 60 72 34
> > > > >> http://touchit.fr
> > > > >>
> > > > >>
> > > > >> -----Original Message-----
> > > > >> From: James Jong [mailto:wjamesjong@gmail.com]
> > > > >> Sent: vendredi 6 d├ęcembre 2013 14:47
> > > > >> To: dev@cordova.apache.org
> > > > >> Subject: Re: iOS webview size
> > > > >>
> > > > >> Sounds like you have some customization in obj-c or the nib files.
> > > > >> The frame should be fullscreen by default.
> > > > >> -James Jong
> > > > >>
> > > > >> On Dec 6, 2013, at 8:25 AM, Maxime LUCE <Maxime@somatic.fr>
wrote:
> > > > >>
> > > > >>> Hi,
> > > > >>>
> > > > >>> I will try to explain the issue more precisely.
> > > > >>> When I launch my app using XCode in the iOS emulator, I can
see
> > that
> > > > >>> my
> > > > >> app is resized in a 320x240 frame. This behavior force iOS to
resize
> > > > >> every DOM elements to adjust to an arbitrary 320x240.
> > > > >>>
> > > > >>> I checked the behavior by putting a "alert(document.width)
on start
> > > > up".
> > > > >>>
> > > > >>> Someone could help me override this behavior ? I'm not an
iOS nor
> > > > >> objective C expert.
> > > > >>>
> > > > >>>
> > > > >>> Cordialement.
> > > > >>> ----------------------------
> > > > >>> Maxime LUCE
> > > > >>> maxime@touchit.fr
> > > > >>> 06 28 60 72 34
> > > > >>> http://touchit.fr
> > > > >>>
> > > > >>>
> > > > >>> Not sure what you mean.
> > > > >>>
> > > > >>> Are you saying you can only have a canvas with a max size
of
> > > > >>> 320x240? I
> > > > >> have an app with a larger canvas than that.
> > > > >>>
> > > > >>> If that is what you are saying, be sure you are not trying
to set
> > > > >>> the
> > > > >> canvas size just using CSS.
> > > > >>>
> > > > >>> For an example maybe have a look at my canvas demo:
> > > > >>>
> > > > >>> https://github.com/devgeeks/Canvas2ImageDemo
> > > > >>> On 06/12/2013 12:06 pm, "Maxime LUCE" <Maxime@somatic.fr>
wrote:
> > > > >>>
> > > > >>>> Hi everyone,
> > > > >>>>
> > > > >>>> It appears that on iOS, webview is restricted to a 320x240
canvas.
> > > > >>>>
> > > > >>>> Is it possible to automatically set canvas size using
device
> > > > >>>> screen's
> > > > >> one ?
> > > > >>>>
> > > > >>>> Why is it not the default scenario ?
> > > > >>>>
> > > > >>>> Cordialement.
> > > > >>>> -------------------------------
> > > > >>>> Maxime LUCE - Somatic
> > > > >>>> maxime.luce@somatic.fr
> > > > >>>> 06 28 60 72 34
> > > > >>>>
> > > > >>
> > > > >>
> > > >
> > > >
> > >
> >


Mime
View raw message