Digg – stoimen's web log on web development Tue, 13 Feb 2018 08:18:15 +0000 en-US hourly 1 https://wordpress.org/?v=5.0.3 Change the Viewport, be Ready for the iPhone! /2010/03/10/change-the-viewport-be-ready-for-the-iphone/ /2010/03/10/change-the-viewport-be-ready-for-the-iphone/#comments Wed, 10 Mar 2010 15:07:08 +0000 /?p=1247 Continue reading Change the Viewport, be Ready for the iPhone! →
Related posts:
  1. Stop Coding iPhone Apps, Begin with HTML5 Mobile Sites
  2. PHP: Mobile Devices HTTP_USER_AGENT Strings
  3. Speed up the JavaScript. It can change dramatically the user experience.
  4. HTML Tags: <base>
]]> Sites for mobile

Have you ever noticed that once you start designing a site for mobile, as iPhone and Nexus One from Google are, the site is looking really ugly! These two devices in particular, as may other using Opera Mini for instance, scale the site, because only than you can view the entire layout and than zoom to a particular part of the page.

This is nice because news sites as cnn.com or lemonde.fr are full of text & image information and once zoomed in they fit the screen – very nice feature of the browsers. However if you’d like to design a site for mobile the bad part comes here. Yeah you know how to detect the browser, that was a topic of one of my previous posts, but even than you fully functional, but less decorated site is scaled again and looks more ugly than the full version of the site.

Twitter for mobile

How to make a site visible in mobile …

Look at the http://mobile.twitter.com/ – the problem is that if you open this link with a normal browser, not from mobile, you’ll get redirected to the twitter.com and you cannot see the difference.

You can see how it’s made on …

The digg’s mobile version. Look at http://m.digg.com/. This time you can see the different approach just by looking at the source code. Pay attention to meta tag in the head – it simply says – “don’t scale”. Nice thing to notice!

Don’t scale my site anymore:

<html>
 <head>
  <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 </head>
...
</html>

Related posts:

  1. Stop Coding iPhone Apps, Begin with HTML5 Mobile Sites
  2. PHP: Mobile Devices HTTP_USER_AGENT Strings
  3. Speed up the JavaScript. It can change dramatically the user experience.
  4. HTML Tags: <base>

]]> /2010/03/10/change-the-viewport-be-ready-for-the-iphone/feed/ 4