Sizing on android phone

Andrew Poulos

unread,

Jan 8, 2012, 10:03:11 PM1/8/12

to

I've a basic page which, onload, returns the viewport size.

When I run the page on a Samsung GS it returns 450 x 320.

When I create a small elearning course designed to run at 450 x 320 the
course ends up occupying just the top quarter of the screen. (Because of
the required user interaction I've had to disallow the default actions
for swipes but not gestures.) If the course queries the viewport size it
returns 1125 x 800.

To get it to "fill" the screen I added
<meta name="viewport" content="width=device-width">
to the head.

My questions are
- I don't understand why the viewport size changes between my basic page
and the course on the same device.
- Will <meta name="viewport"> be supported on Windows phones?

Andrew Poulos

Michael Haufe (TNO)

unread,

Jan 9, 2012, 12:23:29 AM1/9/12

to

I've had the (dis)pleasure of not doing any mobile development yet,
but in an attempt to assist from ignorance perhaps something here will
help:

<http://quirksmode.org/mobile/>

Thomas 'PointedEars' Lahn

unread,

Jan 9, 2012, 6:14:48 AM1/9/12

to

Andrew Poulos wrote:

> I've a basic page which, onload, returns the viewport size.
>
> When I run the page on a Samsung GS it returns 450 x 320.
>

> [no code, no URL]

>
> My questions are
> - I don't understand why the viewport size changes between my basic page
> and the course on the same device.

<http://jibbering.com/faq/notes/posting/#ps1Quest>
<http://www.catb.org/~esr/faqs/smart-questions.html#beprecise>

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

Thomas 'PointedEars' Lahn

unread,

Jan 9, 2012, 6:15:30 AM1/9/12

to

Andrew Poulos wrote:

> I've a basic page which, onload, returns the viewport size.
>
> When I run the page on a Samsung GS it returns 450 x 320.
>

> [no code, no URL]

>
> My questions are
> - I don't understand why the viewport size changes between my basic page
> and the course on the same device.

J.R.

unread,

Jan 12, 2012, 1:29:50 AM1/12/12

to

On 09/01/2012 01:03, Andrew Poulos wrote:
> I've a basic page which, onload, returns the viewport size.
>
> When I run the page on a Samsung GS it returns 450 x 320.
>
> When I create a small elearning course designed to run at 450 x 320 the
> course ends up occupying just the top quarter of the screen. (Because of
> the required user interaction I've had to disallow the default actions
> for swipes but not gestures.) If the course queries the viewport size it
> returns 1125 x 800.

There is a good explanation on measuring the viewport dimensions of a
mobile device browser at:
<http://www.quirksmode.org/mobile/viewports.html>

Basically use (in strict mode):
document.documentElement.offsetWidth / offsetHeight

>
> To get it to "fill" the screen I added
> <meta name="viewport" content="width=device-width">
> to the head.
>
> My questions are
> - I don't understand why the viewport size changes between my basic page
> and the course on the same device.

Maybe because of the css in use, invalid html+xml markup, and/or the JS
code used to retrieve the viewport dimensions.

> - Will <meta name="viewport"> be supported on Windows phones?

I'll pass on this one.

--
Joao Rodrigues (J.R.)

J.R.

unread,

Jan 12, 2012, 3:13:23 AM1/12/12

to

On 12/01/2012 04:29, J.R. wrote:
> On 09/01/2012 01:03, Andrew Poulos wrote:
>> I've a basic page which, onload, returns the viewport size.
>>
>> When I run the page on a Samsung GS it returns 450 x 320.
>>
>> When I create a small elearning course designed to run at 450 x 320 the
>> course ends up occupying just the top quarter of the screen. (Because of
>> the required user interaction I've had to disallow the default actions
>> for swipes but not gestures.) If the course queries the viewport size it
>> returns 1125 x 800.
>
> There is a good explanation on measuring the viewport dimensions of a
> mobile device browser at:
> <http://www.quirksmode.org/mobile/viewports.html>

There is an even better article at:
<http://www.quirksmode.org/mobile/viewports2.html>

>
> Basically use (in strict mode):
> document.documentElement.offsetWidth / offsetHeight
>

Sorry, but the correct code for retrieving the layout viewport
dimensions in strict mode (W3C standard compliant mode) is:
document.documentElement.clientWidth / clientHeight

David Mark also wrote a good primer on measuring the viewport dimensions
of desktop browsers::
<http://www.cinsoft.net/viewport.asp>

Arno Welzel

unread,

Jan 12, 2012, 9:11:25 AM1/12/12

to

Andrew Poulos, 2012-01-09 04:03:

> I've a basic page which, onload, returns the viewport size.
>
> When I run the page on a Samsung GS it returns 450 x 320.
>
> When I create a small elearning course designed to run at 450 x 320 the
> course ends up occupying just the top quarter of the screen. (Because of
> the required user interaction I've had to disallow the default actions
> for swipes but not gestures.) If the course queries the viewport size it
> returns 1125 x 800.
>
> To get it to "fill" the screen I added
> <meta name="viewport" content="width=device-width">
> to the head.
>
> My questions are
> - I don't understand why the viewport size changes between my basic page
> and the course on the same device.

Please read:

<http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/>

> - Will <meta name="viewport"> be supported on Windows phones?

I think so - but i'm not sure. So far i've tested this with Webkit in
Android and iOS and Opera - but i think, Windows Phone will also support
this, as it is the usual way to create a "mobile" version of a website
(e.h.: <http://m.arnowelzel.de> compared to <http://arnowelzel.de>).

--
Arno Welzel
http://arnowelzel.de
http://de-rec-fahrrad.de

Dan

unread,

Jan 12, 2012, 1:11:54 PM1/12/12

to

Do you really need to attempt to set any particular width, versus
simply using "100%" so that it always fills the viewport no matter its
size, or leaving out widths altogether so it uses whatever size comes
naturally to it?

Andrew Poulos

unread,

Jan 12, 2012, 7:30:28 PM1/12/12

to

On 13/01/2012 1:11 AM, Arno Welzel wrote:
> Andrew Poulos, 2012-01-09 04:03:
>
>> I've a basic page which, onload, returns the viewport size.
>>
>> When I run the page on a Samsung GS it returns 450 x 320.
>>
>> When I create a small elearning course designed to run at 450 x 320 the
>> course ends up occupying just the top quarter of the screen. (Because of
>> the required user interaction I've had to disallow the default actions
>> for swipes but not gestures.) If the course queries the viewport size it
>> returns 1125 x 800.
>>
>> To get it to "fill" the screen I added
>> <meta name="viewport" content="width=device-width">
>> to the head.
>>
>> My questions are
>> - I don't understand why the viewport size changes between my basic page
>> and the course on the same device.
>
> Please read:

Thanks for all the responses. I'll try to get some test pages together soon.

Some people have misunderstood my question. I have a basic page which
says the viewport is one size. When I have a more complex page (without
a meta viewport set) it reports a different viewport size.

It could be because the later has some sized elements in it.

Andrew Poulos

Andrew Poulos

unread,

Jan 12, 2012, 7:41:11 PM1/12/12

to

I tried but some things don't scale well enough. For example, a 40 px
wide draggable element at 1000 px wide becomes difficult to move on a
touch device that's 320 px wide.

Andrew Poulos

Arno Welzel

unread,

Jan 13, 2012, 8:52:53 AM1/13/12

to

Andrew Poulos, 2012-01-13 01:30:

The mobile browsers extend the viewport - but only if neccessary to
render a larger overview of the web site which can be zoomed. This
behaviour can be controlled by the viewport meta header.