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
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
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> <SPAN class="comment token">//true, mobile device</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> <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
<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> <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> <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <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...
Here is a link for that:
https://davidwalsh.name/orientation-change
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.
Here is what they look like after rotation, respectively.
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.
I don't have time to look into your code right now but here are the events I use:
<SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">has</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'event-orientationchange'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'orientationchange'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_fixedHeight <SPAN class="operator token">||</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>autoHeight<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_calculatePosition</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_moveToMiddle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_positioning</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'resize'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_fixedHeight <SPAN class="operator token">||</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>autoHeight<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_calculatePosition</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_moveToMiddle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_positioning</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><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></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
I have a few questions.
- Would the code you provided be added to the startup function?
-How do I get values for this._fixedHeight and this.autoHeight?
- Do I write the _calculatePosition, _moveToMiddle and _positioning functions, do I refer to them (I see all three functions are in jimu.js\dijit\Popup.js) or are they automatically referenced?
-Should the resize code be included in an if statement?
As always, any guidance you can provide is greatly appreciated. Thank you.
The code I provided is from me customizing the Popup.js
Would the code you provided be added to the startup function?
I have it in the postCreate.
How do I get values for this._fixedHeight and this.autoHeight?
Those are Boolean vars in my code.
Do I write the _calculatePosition, _moveToMiddle and _positioning functions, do I refer to them (I see all three functions are in jimu.js\dijit\Popup.js) or are they automatically referenced?
you would need to write these functions
Should the resize code be included in an if statement?
Nope
How do I reference the panel from the widget inside it? (Or should I ask this in a new question thread?)
Thanks again,
You would just use a global var. this.blahblah
Robert,
So a global variable defined in widget.js?
PANEL<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>panel<SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
How does it know what panel though?
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
