title: Detect "Request Mobile Website” and "Request Desktop Website" in the iphone IOS
body: <p>I have a problem detecting &quot;Request Mobile Website” and &quot;Request Desktop Website&quot; modes in the iPhone IOS using ReactJs. Because I have a problem (option bar doesn't have values) in the desktop website for the iOS phone.</p>
  <p>Below is the result in the desktop mode in the iOS phone:</p>
  <p><a href="https://i.stack.imgur.com/shhwP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/shhwP.png" alt="i1" /></a></p>
  <p><a href="https://i.stack.imgur.com/jxjxl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jxjxl.png" alt="i2" /></a></p>
  <p>If in the mobile website mode on the iOS phone should be no problem:</p>
  <p><a href="https://i.stack.imgur.com/my6dT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/my6dT.png" alt="i3" /></a></p>
  <p><a href="https://i.stack.imgur.com/hvv4X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hvv4X.png" alt="i4" /></a></p>
  <p>Below is my coding:</p>
  <pre class="lang-html prettyprint-override"><code>function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  
    // Windows Phone must come first because its UA also contains &quot;Android&quot;
    if (/windows phone/i.test(userAgent)) {
      return &quot;Windows Phone&quot;;
    }
  
    if (/android/i.test(userAgent)) {
      return &quot;Android&quot;;
    }
  
    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) &amp;&amp; !window.MSStream) {
      return &quot;iOS&quot;;
    }
  
    return &quot;unknown&quot;;
  }
  
  const getMobileOperatingSystemValue = getMobileOperatingSystem();
  
  
  &lt;Form.Group&gt;
                    &lt;Form.Label&gt;
                      &lt;FormattedMessage id=&quot;GENERAL.DURATION&quot; /&gt;
                    &lt;/Form.Label&gt;
                    {(getMobileOperatingSystemValue === &quot;Android&quot; || getMobileOperatingSystemValue === &quot;Windows Phone&quot; || getMobileOperatingSystemValue === &quot;unknown&quot;) ? (
                      &lt;Form.Control
                        as=&quot;select&quot;
                        name=&quot;duration&quot;
                        value={durationHour}
                        onChange={(e) =&gt; setDurationHour(e.target.value)}
                      &gt;
                        &lt;option value=&quot;0&quot; label=&quot;0&quot; /&gt;
                        &lt;option value=&quot;1&quot; label=&quot;1&quot; /&gt;
                        &lt;option value=&quot;2&quot; label=&quot;2&quot; /&gt;
                        &lt;option value=&quot;3&quot; label=&quot;3&quot; /&gt;
                        &lt;option value=&quot;4&quot; label=&quot;4&quot; /&gt;
                        &lt;option value=&quot;5&quot; label=&quot;5&quot; /&gt;
                        &lt;option value=&quot;6&quot; label=&quot;6&quot; /&gt;
                        &lt;option value=&quot;7&quot; label=&quot;7&quot; /&gt;
                        &lt;option value=&quot;8&quot; label=&quot;8&quot; /&gt;
                        &lt;option value=&quot;9&quot; label=&quot;9&quot; /&gt;
                        &lt;option value=&quot;10&quot; label=&quot;10&quot; /&gt;
                        &lt;option value=&quot;11&quot; label=&quot;11&quot; /&gt;
                        &lt;option value=&quot;12&quot; label=&quot;12&quot; /&gt;
                      &lt;/Form.Control&gt;
                    ) : (
                      &lt;Select
                        styles={{
                          // Fixes the overlapping problem of the component
                          menu: provided =&gt; ({ ...provided, zIndex: 9999 })
                        }}
                        options={optionsHour}
                        value={{ label: durationHour, value: durationHour }}
                        onChange={(e) =&gt; { setDurationHour(e.value) }}
                      &gt;
                      &lt;/Select&gt;
                    )}
                  &lt;/Form.Group&gt;
  </code></pre>
  <p>Hope someone can guide me on how to detect &quot;Request Mobile Website&quot; and &quot;Request Desktop Website&quot; mode using react code. Thanks.</p>