nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Determine Orientation on Mobile Device

WilliamMiller4

How does one determine if a mobile device is being used so changes can be made when the orientation goes from portrait to landscape? Any help would be appreciated.

Thank you,

William

タグ付けされた投稿をもっと見る

Accepted answers

All comments

WilliamMiller4

Hi Robert,

I looked at the link you shared. From reading the article, it sounds like the resize event is the best option, but I'm having trouble implementing it. I have a modal panel, incorporating ideas from the splash widget, that works except for the screen rotation. Below are pictures of the panel (with a widget inside) upon first opening it in the orientation shown.

Modal Panel on Mobile Device in Portrait View

Here is what they look like after rotation, respectively.

Modal Panel on Mobile Device after going from Portrait to Landscape View

I get the following error:

Uncaught TypeError: b.call is not a function(…) init.js:1355

I've attached my panel, along with the original modal panel that is presented in Create a new panel.

Any thoughts would be appreciated and enjoy your first fall weekend of the year.

William

ModifiedModalPanel.zip

ModalPanel.zip

RobertScheitlin__GISP

William,

Here is a link for that:

https://davidwalsh.name/orientation-change

WilliamMiller4

Hi Robert,

Thanks for the links. I had been planning to use the following to determine whether the device being used was mobile or not. (I think this logic is correct. I was referencing this GeoNet thread.)

<SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">isFullWindow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp; <SPAN class="comment token">//true, mobile device</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp; <SPAN class="comment token">//false, not mobile device</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

where

&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="token function">isFullWindow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>appInfo<SPAN class="punctuation token">.</SPAN>isRunInMobile<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Now I need a way to determine if the screen orientation is portrait or landscape.

Looking at the links you provided, it appears the best way to go about this is to use two media queries in the CSS.

<SPAN class="atrule token"><SPAN class="rule token">@media</SPAN> screen and <SPAN class="punctuation token">(</SPAN><SPAN class="property token">orientation</SPAN><SPAN class="punctuation token">:</SPAN> portrait<SPAN class="punctuation token">)</SPAN></SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN>,
<SPAN class="atrule token"><SPAN class="rule token">@media</SPAN> screen and <SPAN class="punctuation token">(</SPAN><SPAN class="property token">orientation</SPAN><SPAN class="punctuation token">:</SPAN> landscape<SPAN class="punctuation token">)</SPAN></SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Is this the way you would go about solving the problem?

I had hoped to make the changes in the JavaScript file. I see how dojo/has and dojo/sniff can help with determining the device being used, but not with screen orientation. Maybe I'm missing something...

William

RobertScheitlin__GISP

William,

There are a couple of ways to know this. You can use css media queries or use dojo/has and dojo/sniff

Using media queries - CSS | MDN

https://dojotoolkit.org/reference-guide/1.10/dojo/has.html

https://dojotoolkit.org/reference-guide/1.10/dojo/sniff.html

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.