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

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

Sizing on android phone

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

Contents

  Sizing on android phone Andrew Poulos <ap_prog@hotmail.com> - 2012-01-09 14:03 +1100
    Re: Sizing on android phone "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2012-01-08 21:23 -0800
    Re: Sizing on android phone Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-09 12:15 +0100
      Re: Sizing on android phone Andrew Poulos <ap_prog@hotmail.com> - 2012-01-09 23:17 +1100
        Re: Sizing on android phone Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-09 14:02 +0100
          Re: Sizing on android phone "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2012-01-09 11:36 -0800
            Re: Sizing on android phone Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-09 22:10 +0100
          Re: Sizing on android phone Andrew Poulos <ap_prog@hotmail.com> - 2012-01-10 06:48 +1100
            Re: Sizing on android phone Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-09 22:15 +0100
              Re: Sizing on android phone Andrew Poulos <ap_prog@hotmail.com> - 2012-01-10 08:31 +1100
                Re: Sizing on android phone Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-09 23:45 +0100
        Re: Sizing on android phone "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-01-09 14:23 +0000
    Re: Sizing on android phone "J.R." <groups_jr-1@yahoo.com.br> - 2012-01-12 04:29 -0200
      Re: Sizing on android phone "J.R." <groups_jr-1@yahoo.com.br> - 2012-01-12 06:13 -0200
    Re: Sizing on android phone Arno Welzel <usenet@arnowelzel.de> - 2012-01-12 15:11 +0100
      Re: Sizing on android phone Andrew Poulos <ap_prog@hotmail.com> - 2012-01-13 11:30 +1100
        Re: Sizing on android phone Arno Welzel <usenet@arnowelzel.de> - 2012-01-13 14:52 +0100
    Re: Sizing on android phone Dan <dan@tobias.name> - 2012-01-12 10:11 -0800
      Re: Sizing on android phone Andrew Poulos <ap_prog@hotmail.com> - 2012-01-13 11:41 +1100

#10061 — Sizing on android phone

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

[toc] | [next] | [standalone]

#10062

On Jan 8, 9:03 pm, Andrew Poulos <ap_p...@hotmail.com> 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.
>
> 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?

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/>

[toc] | [prev] | [next] | [standalone]

#10064

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

[toc] | [prev] | [next] | [standalone]

#10065

On 9/01/2012 10:15 PM, Thomas 'PointedEars' Lahn wrote:
> 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]

I call this function:

function getViewPort(win) {
   win = win || window;
   if (typeof win.document.clientWidth == "number") {
     return [win.document.clientWidth, win.document.clientHeight];
   } else if (win.document.documentElement &&
              win.document.documentElement.clientHeight) {
     return [win.document.documentElement.clientWidth,
             win.document.documentElement.clientHeight];
   } else {
     return [win.document.body.clientWidth,
             win.document.body.clientHeight];
   }
}

>> 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>

The question seemed fair enough to me. I ran the same code in two 
different places and it returns a different result. When I test on my 
desktop I get the same result but on my Samsung GS I get different results.

ANdrew Poulos

[toc] | [prev] | [next] | [standalone]

#10070

Andrew Poulos wrote:

> On 9/01/2012 10:15 PM, Thomas 'PointedEars' Lahn wrote:
>> 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]
> 
> I call this function:
> 
> function getViewPort(win) {
>    win = win || window;
>    if (typeof win.document.clientWidth == "number") {
>      return [win.document.clientWidth, win.document.clientHeight];
>    } else if (win.document.documentElement &&
>               win.document.documentElement.clientHeight) {
>      return [win.document.documentElement.clientWidth,
>              win.document.documentElement.clientHeight];
>    } else {
>      return [win.document.body.clientWidth,
>              win.document.body.clientHeight];
>    }
> }

Obviously, checking the *document*, the *document element* or the *document 
body* will _not_ yield the *viewport* dimensions.


PointedEars
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

[toc] | [prev] | [next] | [standalone]

#10089

On Jan 9, 7:02 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:

> Obviously, checking the *document*, the *document element* or the *document
> body* will _not_ yield the *viewport* dimensions.

FYI: everything you post lately seems to double post.

[toc] | [prev] | [next] | [standalone]

#10091

Michael Haufe (TNO) wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Obviously, checking the *document*, the *document element* or the
>> *document body* will _not_ yield the *viewport* dimensions.
> 
> FYI: everything you post lately seems to double post.

Yes, that only seems to be so.


PointedEars
-- 
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
  -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

[toc] | [prev] | [next] | [standalone]

#10090

On 10/01/2012 12:02 AM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> On 9/01/2012 10:15 PM, Thomas 'PointedEars' Lahn wrote:
>>> 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]
>>
>> I call this function:
>>
>> function getViewPort(win) {
>>     win = win || window;
>>     if (typeof win.document.clientWidth == "number") {
>>       return [win.document.clientWidth, win.document.clientHeight];
>>     } else if (win.document.documentElement&&
>>                win.document.documentElement.clientHeight) {
>>       return [win.document.documentElement.clientWidth,
>>               win.document.documentElement.clientHeight];
>>     } else {
>>       return [win.document.body.clientWidth,
>>               win.document.body.clientHeight];
>>     }
>> }
>
> Obviously, checking the *document*, the *document element* or the *document
> body* will _not_ yield the *viewport* dimensions.

With mobile devices, at least the ones I have my hands on, the browsers 
only open full screen.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#10092

Andrew Poulos wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Obviously, checking the *document*, the *document element* or the
>> *document body* will _not_ yield the *viewport* dimensions.
> 
> With mobile devices, at least the ones I have my hands on, the browsers
> only open full screen.

You need to get your hands on more mobile devices or more browsers or both. 

Regardless, why is it not *obvious* to you that neither of the document 
size, the document element size or the document body size can be generally 
the viewport size?  Do you know what a viewport is?


PointedEars
-- 
Sometimes, what you learn is wrong. If those wrong ideas are close to the 
root of the knowledge tree you build on a particular subject, pruning the 
bad branches can sometimes cause the whole tree to collapse.
  -- Mike Duffy in cljs, <news:Xns9FB6521286DB8invalidcom@94.75.214.39>

[toc] | [prev] | [next] | [standalone]

#10093

On 10/01/2012 8:15 AM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> Obviously, checking the *document*, the *document element* or the
>>> *document body* will _not_ yield the *viewport* dimensions.
>>
>> With mobile devices, at least the ones I have my hands on, the browsers
>> only open full screen.
>
> You need to get your hands on more mobile devices or more browsers or both.
>
> Regardless, why is it not *obvious* to you that neither of the document
> size, the document element size or the document body size can be generally
> the viewport size?  Do you know what a viewport is?

When you put it like that then it doesn't seem likely that I know.

I based my code on code from the FAQ. Perhaps I misunderstood it.

/A

[toc] | [prev] | [next] | [standalone]

#10095

Andrew Poulos wrote:

> On 10/01/2012 8:15 AM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> Obviously, checking the *document*, the *document element* or the
>>>> *document body* will _not_ yield the *viewport* dimensions.
>>> With mobile devices, at least the ones I have my hands on, the browsers
>>> only open full screen.
>> You need to get your hands on more mobile devices or more browsers or
>> both.
>>
>> Regardless, why is it not *obvious* to you that neither of the document
>> size, the document element size or the document body size can be
>> generally the viewport size?  Do you know what a viewport is?
> When you put it like that then it doesn't seem likely that I know.
> 
> I based my code on code from the FAQ. Perhaps I misunderstood it.

Hmmm.  Probably not.  That FAQ entry (10.3) *looks* well-researched (I do 
not have time to review it ATM).  Probably my mistake, then.

You should try debugging your function so that you can see what branch is 
taken by the mobile browser (which one?).

You could try using window.innerWidth and window.innerHeight although the 
FAQ entry does not recommend them, and see what values you get.

However, there *are* mobile browsers that do not show the document in full 
screen when it has been loaded.  One of those is Dolphin Browser HD 7.2.1 
for Android on my HTC Sensation (4G), which has tabs that only disappear if 
you scroll down.

It would be best if you could post the URL or the source code of a reduced 
testcase.


PointedEars
-- 
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[toc] | [prev] | [next] | [standalone]

#10075

Andrew Poulos wrote on 09 jan 2012 in comp.lang.javascript:

> I call this function:
> 
> function getViewPort(win) {
>    win = win || window;
>    if (typeof win.document.clientWidth == "number") {
>      return [win.document.clientWidth, win.document.clientHeight];
>    } else if (win.document.documentElement &&
>               win.document.documentElement.clientHeight) {
>      return [win.document.documentElement.clientWidth,
>              win.document.documentElement.clientHeight];
>    } else {
>      return [win.document.body.clientWidth,
>              win.document.body.clientHeight];
>    }
>}
> 

The if...return works a bit like the infamous if...goto,
so the elses are superfluous.

==========

function getViewPort(win) {
  win = (win || window).document;
  var r = win.body;
  if (typeof win.clientWidth == "number") r = win;
  win = win.documentElement;
  if (win && win.clientHeight) r = win;
  return [r.clientWidth, r.clientHeight];
};

Just playing ;-)


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#10159

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.)

[toc] | [prev] | [next] | [standalone]

#10160

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>

>>
>> 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.)

[toc] | [prev] | [next] | [standalone]

#10167

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

[toc] | [prev] | [next] | [standalone]

#10192

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

[toc] | [prev] | [next] | [standalone]

#10197

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

> 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.

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.


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

[toc] | [prev] | [next] | [standalone]

#10185

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?

[toc] | [prev] | [next] | [standalone]

#10193

On 13/01/2012 5:11 AM, Dan wrote:
> 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?

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

[toc] | [prev] | [standalone]

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

csiph-web