Google Chrome Mobile Emulator: How to show on screen keyboard

Chrome developer tools has limited support for emulating different device states: Default browser UI With Chrome navigation bar With opened keyboard According to the documentation, such feature is only available when emulating “supported devices like the Nexus 5X”. The complete list of emulated devices that support this feature can be found at Chromium devtools-frontend source-code … Read more

position: fixed doesn’t work on iPad and iPhone

A lot of mobile browsers deliberately do not support position:fixed; on the grounds that fixed elements could get in the way on a small screen. The Quirksmode.org site has a very good blog post that explains the problem: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html Also see this page for a compatibility chart showing which mobile browsers support position:fixed;: http://www.quirksmode.org/m/css.html (but … Read more

How to handle floats and decimal separators with html5 input type number

I think what’s missing in the answers above is the need to specify a different value for the step attribute, which has a default value of 1. If you want the input’s validation algorithm to allow floating-point values, specify a step accordingly. For example, I wanted dollar amounts, so I specified a step like this: … Read more

Get GPS location from the web browser

If you use the Geolocation API, it would be as simple as using the following code. navigator.geolocation.getCurrentPosition(function(location) { console.log(location.coords.latitude); console.log(location.coords.longitude); console.log(location.coords.accuracy); }); You may also be able to use Google’s Client Location API. This issue has been discussed in Is it possible to detect a mobile browser’s GPS location? and Get position data from mobile … Read more

How to center a component in MUI and make it responsive?

Since you are going to use this on a login page. Here is a code I used in a Login page using Material-UI MUI v5 <Grid container spacing={0} direction=”column” alignItems=”center” justifyContent=”center” style={{ minHeight: ‘100vh’ }} > <Grid item xs={3}> <LoginForm /> </Grid> </Grid> MUI v4 and below <Grid container spacing={0} direction=”column” alignItems=”center” justify=”center” style={{ minHeight: … Read more

How to access a mobile’s camera from a web app?

In iPhone iOS6 and from Android ICS onwards, HTML5 has the following tag which allows you to take pictures from your device: <input type=”file” accept=”image/*” capture=”camera”> Capture can take values like camera, camcorder and audio. I think this tag will definitely not work in iOS5, not sure about it.

Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

if(window.innerHeight > window.innerWidth){ alert(“Please use Landscape!”); } jQuery Mobile has an event that handles the change of this property… if you want to warn if someone rotates later – orientationchange Also, after some googling, check out window.orientation (which is I believe measured in degrees…) EDIT: On mobile devices, if you open a keyboard then the … Read more