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

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

detect a phone

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

Contents

  detect a phone Andrew Poulos <ap_prog@hotmail.com> - 2017-08-26 19:23 +1000
    Re: detect a phone "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-08-26 11:44 +0200
      Re: detect a phone Andrew Poulos <ap_prog@hotmail.com> - 2017-08-27 00:09 +1000
        Re: detect a phone "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-08-26 20:02 +0200
    Re: detect a phone Richard Maher <maher_rjSPAMLESS@hotmail.com> - 2017-08-26 20:42 +0800
    Re: detect a phone "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-08-26 09:40 -0700
      Re: detect a phone Andrew Poulos <ap_prog@hotmail.com> - 2017-08-27 08:48 +1000
        Re: detect a phone "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-08-26 16:31 -0700
        Re: detect a phone Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-08-27 03:35 +0200
    Re: detect a phone JJ <jj4public@vfemail.net> - 2017-08-27 00:03 +0700
      Re: detect a phone Andrew Poulos <ap_prog@hotmail.com> - 2017-08-27 08:21 +1000
        Re: detect a phone Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-08-27 04:00 +0200
          Re: detect a phone Andrew Poulos <ap_prog@hotmail.com> - 2017-08-27 18:13 +1000
            Re: detect a phone Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-08-27 15:15 +0200
      Re: detect a phone Mark Lloyd <not@mail.invalid> - 2017-08-27 11:30 -0500
    Re: detect a phone Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-08-27 03:33 +0200

#33876 — detect a phone

I've got a situation where it would be beneficial to know if the js is 
running on a phone and I thought "instead of parsing navigator.userAgent 
why not just check for the window screen size?"

Currently no phone's viewport is larger than 600, in both width and 
height, so for the time being would something like

var isPhone = (window.screen.width < 600 || window.screen.height < 600) 
&& ("ontouchstart" in window);

be a "safe" way test?

Andrew Poulos

[toc] | [next] | [standalone]

#33877

Andrew Poulos <ap_prog@hotmail.com> wrote on 26 Aug 2017 in 
comp.lang.javascript:

> I've got a situation where it would be beneficial to know if the js is 
> running on a phone and I thought "instead of parsing navigator.userAgent 
> why not just check for the window screen size?"
> 
> Currently no phone's viewport is larger than 600,

What would be your definition of "phone"?

Tablets can house SIM-cards, 
I can make a phone-call with my desktop,
with my elder "phones" I can only call via VOIP.

> in both width and 
> height, so for the time being would something like
> 
> var isPhone = (window.screen.width < 600 || window.screen.height < 600) 
> && ("ontouchstart" in window);
> 
> be a "safe" way test?

Well, 
unless stretching the definition of "safe", 
and perhaps in fear of unplanned of childNodes, 
I still would advice additional preventative action.

> "safe" way

<https://www.instacart.com/safeway/condoms> 


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

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

#33879

On 26/08/2017 7:44 PM, Evertjan. wrote:
> Andrew Poulos <ap_prog@hotmail.com> wrote on 26 Aug 2017 in
> comp.lang.javascript:
> 
>> I've got a situation where it would be beneficial to know if the js is
>> running on a phone and I thought "instead of parsing navigator.userAgent
>> why not just check for the window screen size?"
>>
>> Currently no phone's viewport is larger than 600,
> 
> What would be your definition of "phone"?

My wife once sent me for milk and she added "if there are eggs get six". 
I came back with 6 litres of milk :-)

Andrew Poulos

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

#33882

Andrew Poulos <ap_prog@hotmail.com> wrote on 26 Aug 2017 in 
comp.lang.javascript:

>> What would be your definition of "phone"?
> 
> My wife once sent me for milk and she added "if there are eggs get six". 
> I came back with 6 litres of milk :-)

... where eggs predated chicken, dairy-cows, reptiles and GSM.

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

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

#33878

On 26-Aug-17 5:23 PM, Andrew Poulos wrote:
> I've got a situation where it would be beneficial to know if the js is 
> running on a phone and I thought "instead of parsing navigator.userAgent 
> why not just check for the window screen size?"
> 
> Currently no phone's viewport is larger than 600, in both width and 
> height, so for the time being would something like
> 
> var isPhone = (window.screen.width < 600 || window.screen.height < 600) 
> && ("ontouchstart" in window);
> 
> be a "safe" way test?
> 
> Andrew Poulos

What are you trying to do/establish?

Media queries or make a phone call?

		try {
			xCom = true;
			window.location.href='tel:'+serverParams.phoneC;
		} catch (evt) {console.log("e is "+evt); xCom = false;}

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

#33880

Andrew Poulos wrote:
> I've got a situation where it would be beneficial to know if the js is 
> running on a phone and I thought "instead of parsing navigator.userAgent 
> why not just check for the window screen size?"

What are you ultimately trying to do? Determine if a screen is small? Determine if the user is using a mouse vs. a touch screen? Something else?

In other words, I'm assuming you don't care about if a person is using a phone or not, you are concerned about what using a phone implies.

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

#33885

On 27/08/2017 2:40 AM, Michael Haufe (TNO) wrote:
> Andrew Poulos wrote:
>> I've got a situation where it would be beneficial to know if the js
>> is running on a phone and I thought "instead of parsing
>> navigator.userAgent why not just check for the window screen
>> size?"
> 
> What are you ultimately trying to do? Determine if a screen is small?
> Determine if the user is using a mouse vs. a touch screen? Something
> else?
> 
> In other words, I'm assuming you don't care about if a person is
> using a phone or not, you are concerned about what using a phone
> implies.
> 

Ultimately I need to know if the screen is small.

Andrew Poulos

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

#33886

Andrew Poulos wrote:

> Ultimately I need to know if the screen is small.

I think document.documentElement.clientWidth and document.documentElement.clientHeight is most appropriate here. 

Additional information: <https://www.quirksmode.org/mobile/viewports2.html>

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

#33891

Andrew Poulos wrote:

> On 27/08/2017 2:40 AM, Michael Haufe (TNO) wrote:
>> In other words, I'm assuming you don't care about if a person is
>> using a phone or not, you are concerned about what using a phone
>> implies.
> 
> Ultimately I need to know if the screen is small.

Why?

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#33881

On Sat, 26 Aug 2017 19:23:48 +1000, Andrew Poulos wrote:
> I've got a situation where it would be beneficial to know if the js is 
> running on a phone and I thought "instead of parsing navigator.userAgent 
> why not just check for the window screen size?"
> 
> Currently no phone's viewport is larger than 600, in both width and 
> height, so for the time being would something like
> 
> var isPhone = (window.screen.width < 600 || window.screen.height < 600) 
> && ("ontouchstart" in window);
> 
> be a "safe" way test?

IMO, the presence check of `window.ontouchstart` alone is reliable enough to
detect whether the device is a mobile device or not. My phone has a
1080x1920 screen, so it has more than 600px on any of its screen side.
Screen size should only be used for page layouts.

Ideally, the Telephony API should be detected if you want to detect for a
phone device and not just for a mobile device. But so far, only the mobile
version of Firefox and B2G version of Firefox have adopted that API. Chrome
including other browsers which don't use the Gecko engine, haven't.

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

#33884

On 27/08/2017 3:03 AM, JJ wrote:
> On Sat, 26 Aug 2017 19:23:48 +1000, Andrew Poulos wrote:
>> I've got a situation where it would be beneficial to know if the js is
>> running on a phone and I thought "instead of parsing navigator.userAgent
>> why not just check for the window screen size?"
>>
>> Currently no phone's viewport is larger than 600, in both width and
>> height, so for the time being would something like
>>
>> var isPhone = (window.screen.width < 600 || window.screen.height < 600)
>> && ("ontouchstart" in window);
>>
>> be a "safe" way test?
> 
> IMO, the presence check of `window.ontouchstart` alone is reliable enough to
> detect whether the device is a mobile device or not. My phone has a
> 1080x1920 screen, so it has more than 600px on any of its screen side.

The pixel size of an iPhone 7 plus is 1080 x 1920 but the viewport size 
is only 441 x 736.

The pixel size of a Google Pixel is 1080 x 1920 but the viewport size is 
411 x 731.

The pixel size of a Samsung Galaxy Note 5 is 1440 x 2560 but the 
viewport size is 480 x 853.

What phone do you have?

Andrew Poulos

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

#33892

Andrew Poulos wrote:

> On 27/08/2017 3:03 AM, JJ wrote:
>> IMO, the presence check of `window.ontouchstart` alone is reliable enough
>> to detect whether the device is a mobile device or not.

Depends.  You can enable support for touch events in Chrome, for mobile 
testing, *without* the corresponding display size.

>> My phone has a 1080x1920 screen, so it has more than 600px on any of its
>> screen side.
> 
> The pixel size of an iPhone 7 plus is 1080 x 1920 but the viewport size
> is only 441 x 736.
> 
> The pixel size of a Google Pixel is 1080 x 1920 but the viewport size is
> 411 x 731.
> 
> The pixel size of a Samsung Galaxy Note 5 is 1440 x 2560 but the
> viewport size is 480 x 853.

Note that the Note 5 and the failed Note 7 have been succeeded by the Note 8 
with QHD+ display as of 2017-08-23.

For the Galaxy S7 and S7 Edge at least, the display resolution is now 
*variable* (a feature of Samsung TouchWiz 6.0, previously only by third-
party app): Display resolution is reduced *by default* (on the S7, from WQHD 
to FHD) in “Power saving mode”.  I understand that Samsung Game Launcher can 
also reduce the display resolution for games if that is desired.

Add to that the virtual desktops (split screen) introduced with Android 6.0 
“Marshmallow”.
 
> What phone do you have?

For real, Samsung Galaxy S7.  BrowserStack has others.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#33893

On 27/08/2017 12:00 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
>> On 27/08/2017 3:03 AM, JJ wrote:
>>> IMO, the presence check of `window.ontouchstart` alone is reliable enough
>>> to detect whether the device is a mobile device or not.
> 
> Depends.  You can enable support for touch events in Chrome, for mobile
> testing, *without* the corresponding display size.
> 
>>> My phone has a 1080x1920 screen, so it has more than 600px on any of its
>>> screen side.
>>
>> The pixel size of an iPhone 7 plus is 1080 x 1920 but the viewport size
>> is only 441 x 736.
>>
>> The pixel size of a Google Pixel is 1080 x 1920 but the viewport size is
>> 411 x 731.
>>
>> The pixel size of a Samsung Galaxy Note 5 is 1440 x 2560 but the
>> viewport size is 480 x 853.
> 
> Note that the Note 5 and the failed Note 7 have been succeeded by the Note 8
> with QHD+ display as of 2017-08-23.
> 
> For the Galaxy S7 and S7 Edge at least, the display resolution is now
> *variable* (a feature of Samsung TouchWiz 6.0, previously only by third-
> party app): Display resolution is reduced *by default* (on the S7, from WQHD
> to FHD) in “Power saving mode”.  I understand that Samsung Game Launcher can
> also reduce the display resolution for games if that is desired.
> 
> Add to that the virtual desktops (split screen) introduced with Android 6.0
> “Marshmallow”.
>   
>> What phone do you have?
> 
> For real, Samsung Galaxy S7.  BrowserStack has others.

Ok, so what does window.screen.width and window.screen.height return?

Andrew Poulos

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

#33897

Andrew Poulos wrote:

> On 27/08/2017 12:00 PM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> What phone do you have?
>> For real, Samsung Galaxy S7.  BrowserStack has others.
> 
> Ok, so what does window.screen.width and window.screen.height return?

It is _not_ `window.screen.width` and `window.screen.height`; it is 
`screen.width` and `screen.height`.  `screen` is a host-defined property of 
the global object which just happens to be mirrored by the value of the 
global object’s host-defined `window` property.

As to what those properties mean (only *methods* have a return value):
AISB, it depends, and with regard to your problem it is irrelevant except 
that the values are not reliable.
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#33902

On 08/26/2017 12:03 PM, JJ wrote:

[snip]

> IMO, the presence check of `window.ontouchstart` alone is reliable enough to
> detect whether the device is a mobile device or not.

There are non-mobile devices with touch screens.

[snip]

-- 
Mark Lloyd
http://notstupid.us/

"For my money, I'll bet on reason and humanistic kindness. Even if I am
wrong I will have enjoyed my life, the existence of which is under
little dispute." -- Dan Barker, "Losing Faith in Faith"

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

#33890

Andrew Poulos wrote:

> I've got a situation where it would be beneficial to know if the js is
> running on a phone and I thought "instead of parsing navigator.userAgent
> why not just check for the window screen size?"

First of all, because that is an oxymoron.  What is “window screen size” 
supposed to mean?  In a windowing system, windows are displayed on the 
screen, or more precisely on a desktop (area).  There is a *window* size, 
and a *screen* (precisely: desktop) size.

Second, none of them have anything to do with whether a Web application is 
running on a mobile device (smartphone or tablet): On a desktop PC or 
laptop/notebook, I can have a smaller window size for *any* reason – most 
importantly, cascaded or tiled window arrangement.  With virtual desktops, 
I can also have a "screen" (_desktop_) smaller than the display resolution.  
(This feature is now available on mobile devices, too, with standard 
firmware.)

Display resolution != desktop size != browser window size != viewport size. 
[psf 3.7]
 
> Currently no phone's viewport is larger than 600, in both width and
> height, so for the time being would something like
> 
> var isPhone = (window.screen.width < 600 || window.screen.height < 600)
> && ("ontouchstart" in window);
> 
> be a "safe" way test?

No.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

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

csiph-web