As per my experience, the screen rotation behaviour across different devices is not the same. The events such as resize and orientation may not fire simultaneously and occur at different timeframes.

The values such as window.orientation and screen.width may not change at the right time. Also, the screen.width does not work in the iPhone’s Safari browser. So, it is recommended to not rely on the screen.width.

Listening to both window.resize and window.orientation events is the best approach. As said, android devices don’t report the orientationChange when the device screen rotates. As a fail safe mechanism to listen to orientationChange events every two seconds.

Following is the code to do this and it will work for both ios and android.

<span class="token keyword">var</span> prevOrientation <span class="token operator">=</span> window<span class="token punctuation">.</span>orientation<span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token function-variable function">orientationCheck</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>orientation <span class="token operator">!==</span> prevOrientation<span class="token punctuation">)</span><span class="token punctuation">{</span>
        prevOrientation <span class="token operator">=</span> window<span class="token punctuation">.</span>orientation<span class="token punctuation">;</span>
        <span class="token comment">// Device orientation got changed. Write your logic here.</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"resize"</span><span class="token punctuation">,</span> orientationCheck<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"orientationchange"</span><span class="token punctuation">,</span> orientationCheck<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// The following code is "optional" as this is paritulary for android where sometimes window.orientation fails to get updated with the right value.</span>
<span class="token function">setInterval</span><span class="token punctuation">(</span>checkOrientation<span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Categorized in:

Programming

Tagged in: