input.select() does not work on iOS

The recommended method to give a text field focus and select its contents is the following: document.getElementById(‘myInput’).select(); However, this does not work in iOS. The correct way to do it is to use setSelectionRange on an already focused input. var input = document.getElementById(‘myInput’); input.focus(); input.setSelectionRange(0,99999); setSelectionRange will not work on iOS if the element doesn’t […]

What is “ReferenceError: Can’t find variable: __gCrWeb”?

I have seen this error in our Sentry logs, and after some research, it appears to be an error that can safely be ignored. It only happens in Chrome on iOS, most likely at random, and it is seemingly unrelated to the page being viewed. It has been tweeted about, but there doesn’t seem to […]

Mobile web design: how to disable zooming on your mobile sites

When you are making a mobile website, you might want to disable sideways scrolling and zooming. Although I wouldn’t personally recommend disabling zooming, it’s easily done. In your head tag, insert the following meta tag: <meta content=’width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0′ name=’viewport’ /> This tag is recognized by all major browsers, including Chrome on Android and […]

How to prevent Safari from resizing text in iOS

By default, rotating the iPhone’s screen will resize the font in mobile Safari. Although this can be useful for desktop websites, it can easily break a beautiful mobile design. All you need to do is to set the following CSS attribute on the body element: -webkit-text-size-adjust: none; This will prevent webkit browsers (Safari included) from […]

How to preview your PSDs on your iPhone

If you wish to see how your designs would look like on a mobile screen with very little overhead, I recommend you try LiveView. I’ve been using it to compare a mobile website with the original designs, and it’s working great for me. LiveView takes a part of your screen and broadcasts it to connected […]