Disable “pull to refresh” in Chrome for Android

In mobile Chrome, pulling the top of the page will reload it. Although it’s a convenient UI pattern, it might get in the way if you are trying to implement gestures in your app. After careful observation, I have come up with a simple solution. AngularJS I have successfully disabled “pull to reload” with this […]

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 […]

How to launch the Windows Phone Emulator without Visual Studio

Here’s a simple trick that lets you launch the Windows Phone 8 Emulator without using Visual Studio 2012. It’s quite simple: Open “Command Prompt” in Administrator mode (right click on it on the Start page icon, choose Run as administrator) Launch the emulator using the following command (with quotes): “C:\Program Files (x86)\Microsoft XDE\8.0\xde” -vhd “C:\Program […]

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 […]

How to use different CSS styles depending on screen orientation

Most modern browsers support the orientation media attribute, which allows you to define specific styles for devices in portrait or landscape mode. This is especially useful when designing websites for mobile devices. Here is how you use the orientation media selectors: @media screen and (orientation:portrait) { /* Portrait styles */ } @media screen and (orientation:landscape) […]