title: Make input readonly on mobile devices only
body: <p>I have an input that uses the <a href="https://itsjavi.com/bootstrap-colorpicker/" rel="nofollow noreferrer">bootstrap color picker</a>. The input happens to be in a scrollable modal, and when it's about under half of the screen on a mobile phone, the virtual keyboard will partially or fully cover the color selector. I've managed to fix this by making the input readonly, since the click event is still triggered and the selector still appears. However I'd still like to let power-users on desktops type their own hex colors if they wish.</p>
  
  <p>Is there any reliable way to make an input readonly only on mobile devices, that allows dynamic loading(input will be loaded via jquery's <code>.load()</code> or <code>.html()</code> if POST)?</p>
  
  <p>Note that I'm aware I can do this by using it as a component, I just want to know if it's possible or not for future reference as well, though I'd prefer the current input-only design. I was very suprised there was nothing on this on SO especially since people <a href="https://stackoverflow.com/questions/3539292/ipad-web-application-how-do-i-prevent-the-keyboard-from-popping-up-on-jquery-da">had my problem but with the date-picker</a>.</p>
  
  <p><a href="https://i.stack.imgur.com/Pp8pR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pp8pR.png" alt="enter image description here"></a></p>