#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    113
    Rep Power
    49

    Page To Load Fully Into Mobile Screen - How?


    I have a really simple website which I am designing as personal project. The page content is to be 180px in width and the problem is that when I view the site in a mobile browser simulator it is necessary to zoom in to view it.

    What I would like to do is to make it so that it is fully zoomed in automatically when accessing it through a mobile device.

    To this end I have already found, and studied, the following resources, shown below ...but I still cannot acheive the desired result. Can anyone help with this, please, or point me to any posts where my question has already been answered? - I do not need anything fancy, - once I have something working I should be able to build on it and develop it further if need be.

    http://www.w3.org/TR/css3-mediaqueries/
    http://www.rebol.net/cgi-bin/r3blog.r?view=0164
    http://www.w3schools.com/Css/css_mediatypes.asp
    http://www.alistapart.com/articles/responsive-web-design/
    http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    113
    Rep Power
    49
    This is actually quite easy to achieve ...just use something like the following in the stylesheet:

    Code:
    body	{
    	width: 110px;
    	margin: 0 auto;
    	font: normal 0.8em Trebuchet MS, Arial, sans-serif;
    	}
    ...and any content within the <body> tags will be within a 110px width area ...with a fully zoomed-in display in mobile devices.

    Media types can be made to work with something like the following for the external CSS call:

    Code:
    <link rel="stylesheet" type="text/css" media="handheld" href="test.css" />
    In the above example all CSS styling would be lost if viewing the page through a browser on a desktop computer or laptop, but it would be visible if viewed using a mobile emulator or, presumably, a web-enabled mobile browsing device.

    http://testiphone.com/
    http://ipinfo.info/netrenderer/
    http://www.opera.com/mobile/demo/
    http://www.mobilephoneemulator.com/

IMN logo majestic logo threadwatch logo seochat tools logo