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

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

Confused about window size

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

Contents

  Confused about window size Andrew Poulos <ap_prog@hotmail.com> - 2012-10-30 18:02 +1100
    Re: Confused about window size "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-10-30 08:58 +0100
      Re: Confused about window size Andrew Poulos <ap_prog@hotmail.com> - 2012-10-30 20:44 +1100
        Re: Confused about window size "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-10-30 16:57 +0100
          Re: Confused about window size Andrew Poulos <ap_prog@hotmail.com> - 2012-10-31 10:29 +1100
            Re: Confused about window size "J.R." <groups_jr-1@yahoo.com.br> - 2012-10-31 22:09 -0300
              Re: Confused about window size "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-11-01 18:14 +0100
    Re: Confused about window size David Mark <dmark.cinsoft@gmail.com> - 2012-10-30 01:39 -0700

#16956 — Confused about window size

A Samsung's Galaxy S2 screen's size is
   480 x 800.

When I put an some code in a page and it returned that the window size is
   240 x 320

Why the change in proportion? The 240 I can sort of understand but why 
isn't reported as
   240 x 400
?

Andrew Poulos

[toc] | [next] | [standalone]

#16958

Andrew Poulos wrote on 30 okt 2012 in comp.lang.javascript:

> A Samsung's Galaxy S2 screen's size is
>    480 x 800.
> 
> When I put an some code in a page and it returned that the window size 
is
>    240 x 320

I take it that you are talking of an unspecified browser [default, chrome 
mobile, dolphin, opera mobile, skyfire, etc], as implemented on your 
[specified] specific android platform, used in an unspecified screen-mode 
[portrait or landscape] and reported in an unspecified unit [px, mm, inch, 
etc]?

Can you specify the unspecified?

Does such [supposed] browser have a header?

Are you using javascript? If so what is your code? 

> Why the change in proportion? The 240 I can sort of understand but why 
> isn't reported as
>    240 x 400
> ?

Perhaps you should indulge us then by making and specifying a web-page for 
testing!

I think you take it out of proportion, the present landscape of mobile 
cyberworld is full of bizarre portraits.

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

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

#16964

On 30/10/2012 6:58 PM, Evertjan. wrote:
> Andrew Poulos wrote on 30 okt 2012 in comp.lang.javascript:
>
>> A Samsung's Galaxy S2 screen's size is
>>     480 x 800.
>>
>> When I put an some code in a page and it returned that the window size
> is
>>     240 x 320
>
> I take it that you are talking of an unspecified browser [default, chrome
> mobile, dolphin, opera mobile, skyfire, etc], as implemented on your
> [specified] specific android platform, used in an unspecified screen-mode
> [portrait or landscape] and reported in an unspecified unit [px, mm, inch,
> etc]?
>
> Can you specify the unspecified?

I'm considering using appMobi
<http://www.appmobi.com/>
to create an android app of some HTML5 I'm writing. I'd like to know the 
window size before I start designing in earnest.

> Does such [supposed] browser have a header?

> Are you using javascript? If so what is your code?

The entire test page is

<!DOCTYPE html>
<html>
<head>
<title>Size</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script type="text/javascript" charset="utf-8" 
src="http://localhost:58888/_appMobi/appmobi.js"></script>

<script type="text/javascript">
function onDeviceReady() {
   AppMobi.device.hideSplashScreen();
   AppMobi.device.setRotateOrientation("landscape");


   var str, size = [];
   if (typeof window.document.clientWidth == "number") {
     size = [window.document.clientWidth, window.document.clientHeight];
   } else if (window.document.documentElement &&
     window.document.documentElement.clientHeight) {
     size = [window.document.documentElement.clientWidth,
             window.document.documentElement.clientHeight];
   } else {
     size = [window.document.body.clientWidth,
             window.document.body.clientHeight];
   }
	
str = "Window width is " + size[0] + " pixels," +
       " and the height is " + size[1] + " pixels";
document.getElementById("sizer").firstChild.nodeValue = str;
}
document.addEventListener("AppMobi.device.ready",onDeviceReady,false);
</script>

</head>
<body>
<h2 id="sizer" style="text-align:center;">&nbsp;</h2>
</body>
</html>

>> Why the change in proportion? The 240 I can sort of understand but why
>> isn't reported as
>>     240 x 400
>> ?
>
> Perhaps you should indulge us then by making and specifying a web-page for
> testing!
>
> I think you take it out of proportion, the present landscape of mobile
> cyberworld is full of bizarre portraits.

Andrew Poulos

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

#16968

Andrew Poulos wrote on 30 okt 2012 in comp.lang.javascript:

> On 30/10/2012 6:58 PM, Evertjan. wrote:
>> Andrew Poulos wrote on 30 okt 2012 in comp.lang.javascript:
>>
>>> A Samsung's Galaxy S2 screen's size is
>>>     480 x 800.
>>>
>>> When I put an some code in a page and it returned that the window
>>> size 
>> is
>>>     240 x 320
>>
>> I take it that you are talking of an unspecified browser [default,
>> chrome mobile, dolphin, opera mobile, skyfire, etc], as implemented
>> on your [specified] specific android platform, used in an unspecified
>> screen-mode [portrait or landscape] and reported in an unspecified
>> unit [px, mm, inch, etc]?
>>
>> Can you specify the unspecified?
> 
> I'm considering using appMobi
> <http://www.appmobi.com/>
[..]
> 
> The entire test page is
> 
> <!DOCTYPE html>
> <html>
> <head>
> <title>Size</title>
> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
> 
> <script type="text/javascript" charset="utf-8" 
> src="http://localhost:58888/_appMobi/appmobi.js"></script>

http://localhost:58888/_appMobi/appmobi.js" ??????

That does not really help testing your problem over the web, does it?

Why would we need all this code to answer your question?

Why did you not specify the browser used?

> 
>>> Why the change in proportion? The 240 I can sort of understand but
>>> why isn't reported as
>>>     240 x 400
>>> ?
>>
>> Perhaps you should indulge us then by making and specifying a
>> web-page for testing!

Sigh, 
so it seems I will have to make a page containing only of:

=======================================
<!DOCTYPE HTML>

<script type='text/javascript'>
alert([window.document.documentElement.clientWidth,
       window.document.documentElement.clientHeight])
</script>
=======================================

TRY:
<http://hannivoort.org/test/testForAndrew.asp>

This shows on my Galaxy-Nexus with Android 4.1.2 and in Chrome-Mobile:

980,1413 in portrait-mode
980,470 in landscape.

Now if I add:
<meta name="viewport" ... width=device-width
making:

=======================================
<!DOCTYPE HTML>
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1">
<script type='text/javascript'>
alert([window.document.documentElement.clientWidth,
       window.document.documentElement.clientHeight])
</script>
=======================================

TRY:
<http://hannivoort.org/test/testForAndrewViewport.asp>

The numbers become:

360,519 in portrait-mode
598,287 in landscape.

Does this help you in understanding that perhaps[!!!]
the tested Chrome-Mobile will guess a zoom,
using horizontal size is 980px,
unless it is explicitly prescribed differently,
here with the command: "width=device-width" ??

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

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

#16969

On 31/10/2012 2:57 AM, Evertjan. wrote:
> Andrew Poulos wrote on 30 okt 2012 in comp.lang.javascript:
>
>> On 30/10/2012 6:58 PM, Evertjan. wrote:
>>> Andrew Poulos wrote on 30 okt 2012 in comp.lang.javascript:
>>>
>>>> A Samsung's Galaxy S2 screen's size is
>>>>      480 x 800.
>>>>
>>>> When I put an some code in a page and it returned that the window
>>>> size
>>> is
>>>>      240 x 320
>>>
>>> I take it that you are talking of an unspecified browser [default,
>>> chrome mobile, dolphin, opera mobile, skyfire, etc], as implemented
>>> on your [specified] specific android platform, used in an unspecified
>>> screen-mode [portrait or landscape] and reported in an unspecified
>>> unit [px, mm, inch, etc]?
>>>
>>> Can you specify the unspecified?
>>
>> I'm considering using appMobi
>> <http://www.appmobi.com/>
> [..]
>>
>> The entire test page is
>>
>> <!DOCTYPE html>
>> <html>
>> <head>
>> <title>Size</title>
>> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
>>
>> <script type="text/javascript" charset="utf-8"
>> src="http://localhost:58888/_appMobi/appmobi.js"></script>
>
> http://localhost:58888/_appMobi/appmobi.js" ??????
>
> That does not really help testing your problem over the web, does it?
>
> Why would we need all this code to answer your question?
>
> Why did you not specify the browser used?
>
>>
>>>> Why the change in proportion? The 240 I can sort of understand but
>>>> why isn't reported as
>>>>      240 x 400
>>>> ?
>>>
>>> Perhaps you should indulge us then by making and specifying a
>>> web-page for testing!
>
> Sigh,
> so it seems I will have to make a page containing only of:
>
> =======================================
> <!DOCTYPE HTML>
>
> <script type='text/javascript'>
> alert([window.document.documentElement.clientWidth,
>         window.document.documentElement.clientHeight])
> </script>
> =======================================
>
> TRY:
> <http://hannivoort.org/test/testForAndrew.asp>
>
> This shows on my Galaxy-Nexus with Android 4.1.2 and in Chrome-Mobile:
>
> 980,1413 in portrait-mode
> 980,470 in landscape.
>
> Now if I add:
> <meta name="viewport" ... width=device-width
> making:
>
> =======================================
> <!DOCTYPE HTML>
> <meta name="viewport" content="width=device-width, initial-scale=1,
> maximum-scale=1">
> <script type='text/javascript'>
> alert([window.document.documentElement.clientWidth,
>         window.document.documentElement.clientHeight])
> </script>
> =======================================
>
> TRY:
> <http://hannivoort.org/test/testForAndrewViewport.asp>
>
> The numbers become:
>
> 360,519 in portrait-mode
> 598,287 in landscape.
>
> Does this help you in understanding that perhaps[!!!]
> the tested Chrome-Mobile will guess a zoom,
> using horizontal size is 980px,
> unless it is explicitly prescribed differently,
> here with the command: "width=device-width" ??

Sorry,my bad. I should've made it clearer that I'm using appMobi to 
create an android app from HTML5 pages. While I can get a HTML5 page to 
display the viewport size correctly it fails as an app.

I was hoping it was just some misunderstanding on my part but now it 
seems to be a flaw in appMobi.

Andrew Poulos

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

#17001

On 30-10-2012 20:29, Andrew Poulos wrote:
<snip>

>> =======================================
>> <!DOCTYPE HTML>
>>
>> <script type='text/javascript'>
>> alert([window.document.documentElement.clientWidth,
>>         window.document.documentElement.clientHeight])
>> </script>
>> =======================================

In IE, the HTML element (document.documentElement) is used for the 
viewport in standards mode (also known as "strict mode") and the body 
(document.body) is used in "quirks mode".

document.documentElement.clientHeight (in strict mode) may  output a 
slightly different value from document.body.clientHeight (in quirks mode).


> Sorry,my bad. I should've made it clearer that I'm using appMobi to
> create an android app from HTML5 pages. While I can get a HTML5 page to
> display the viewport size correctly it fails as an app.
>
> I was hoping it was just some misunderstanding on my part but now it
> seems to be a flaw in appMobi.

Although you are supplying the HTML 5 Doctype (<!DOCTYPE HTML>), I can't 
see if the page is rendered in strict mode. Maybe this appMobi is doing 
something wrong.

See:
<http://www.quirksmode.org/mobile/viewports.html>
<http://www.cinsoft.net/viewport.asp>

--
João Rodrigues (J.R.)

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

#17002

J.R. wrote on 01 nov 2012 in comp.lang.javascript:

> On 30-10-2012 20:29, Andrew Poulos wrote:
> <snip>
> 
>>> =======================================
>>> <!DOCTYPE HTML>
>>>
>>> <script type='text/javascript'>
>>> alert([window.document.documentElement.clientWidth,
>>>         window.document.documentElement.clientHeight])
>>> </script>
>>> =======================================

Wrong attribution, I wrote that!

> In IE, the HTML element (document.documentElement) is used for the 
> viewport in standards mode (also known as "strict mode") and the body 
> (document.body) is used in "quirks mode".

No matter, as the Q was about viewpordt in mobile browsers.

> document.documentElement.clientHeight (in strict mode) may  output a 
> slightly different value from document.body.clientHeight (in quirks
> mode). 

Mobile browsers, do they have a strict and a quircks mode.

Methinks not, but have no proof. 

>> Sorry,my bad. I should've made it clearer that I'm using appMobi to
>> create an android app from HTML5 pages. While I can get a HTML5 page
>> to display the viewport size correctly it fails as an app.
>>
>> I was hoping it was just some misunderstanding on my part but now it
>> seems to be a flaw in appMobi.
> 
> Although you are supplying the HTML 5 Doctype (<!DOCTYPE HTML>), I
> can't see if the page is rendered in strict mode. Maybe this appMobi
> is doing something wrong.

No, he did not suply that, I used the HTML 5 Doctype.

Again, this test is only ment for mobie browsers.

> See:
> <http://www.quirksmode.org/mobile/viewports.html>
> <http://www.cinsoft.net/viewport.asp>

Inconsequential.

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

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

#16960

On Oct 30, 3:02 am, Andrew Poulos <ap_p...@hotmail.com> wrote:
> A Samsung's Galaxy S2 screen's size is
>    480 x 800.
>
> When I put an some code in a page and it returned that the window size is
>    240 x 320

The viewport size? The window is often larger as it contains controls
(e.g. the address bar) in addition to the viewport.

>
> Why the change in proportion? The 240 I can sort of understand but why
> isn't reported as
>    240 x 400
> ?
>

What properties did you reference? Also, make sure you use a viewport
META. Without one, there's no telling what the mobile devices might
report. Even with one, it takes some feature testing to be sure you
have the right property pair. In general, it's best to avoid designs
that *must* measure the viewport to succeed. When they fail, the
results are ugly (and often unusable).

If you look at what mobile frameworks provide, virtually all attempt
to reinvent the viewport, touch scrolling, etc. None of their
"solutions" resemble the free scrolling behavior provided by the
browser, many use browser sniffing and all have a history of falling
apart in new environments.

Just read a blog post the other day that recommended doing the same,
just because fixed positioning was a little twitchy on the latest iPad
(or something like that). Famous "mobile strategist" PPK has always
recommended the same sort of lunatic approach, despite being
thoroughly confused about the viewport himself (see his blog post on
the subject). There's no shortage of advice out there, but virtually
all of it is bad. You don't get hits on your blog by telling
developers that they *can't* possibly hope to do something that they
really, really want to do. Encourage such delusions and the world will
beat a path to your door. :(

It doesn't seem to occur to the average pundit/library author that
they are incapable of simulating the viewport with JS. If they can't
get fixed positioning to work to their satisfaction, at least in the
browsers that they "support", then they should simply let their header
scroll (or fade it out during scrolling, move and fade back in after).
But that's not very "awesome" is it? :)

The "JS community" as a whole will never learn as it is about
marketing scripts that seem to work to developers who have no way to
know otherwise (until it is too late). Reinventing the viewport is a
10 (out of 10) on the difficulty scale, even for a multi-browser
script (those are the ones that fall apart in new environments). A
cross-browser solution is virtually (but not entirely) impossible at
this time. So it doesn't make any sense to accept such "solutions" at
face value, but "show me where it fails" is the standard battle-cry in
this industry. Now matter how many times scripts get routed by new
browsers, the same mistakes are repeated, new versions are issued,
"supported" browser lists updated, etc. Must be hard work. :(

Of course, the harder they flail, the more "active" the project and
the longer they struggle, the more "mature" (despite the constant
changes). jQuery, Dojo, YUI, Ext JS, etc. (you know the list) are all
desperately trying to carve up the market for free "mobile scripts",
despite execrable track records on the desktop. Predictably, the
results have been atrocious, not to mention wildly inappropriate for
battery-powered mobile devices. Also predictably, beginners see these
things as their only hope for "cross-browser" solutions (despite the
"mobile" qualifications). Avoid these misguided efforts like the
plague.

As a user, I got an app the other day that occasionally scrolled the
header off-screen. Didn't bother me in the slightest, even though I
know it could have been fixed to the top of the viewport without much
trouble. The average user won't give it a second thought. I've seen
headers that twitch a bit during scrolling as well. That's hardly a
crisis. OTOH, if they had tried to reinvent the viewport and failed
(the expected result), their app/site would have been unusable. But
then I suppose they could have just scratched the offending browser
out of their "supported list", thereby shifting the blame to the
users, browser developers, phone manufacturers or anybody other than
themselves. That's how these things "work". ;)

[toc] | [prev] | [standalone]

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

csiph-web