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