1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Trouble making a web app mobile-ready

Discussion in 'Programming & Webmastering' started by FordGT90Concept, Mar 26, 2013.

  1. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,329 (6.32/day)
    Thanks Received:
    3,358
    Location:
    IA, USA
    Crunching for Team TPU
  2. BiggieShady

    BiggieShady

    Joined:
    Feb 8, 2012
    Messages:
    933 (1.04/day)
    Thanks Received:
    307
    Location:
    Zagreb, Croatia
  3. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,329 (6.32/day)
    Thanks Received:
    3,358
    Location:
    IA, USA
    Code:
    <meta name="viewport" content="width=device-width" />
    Seemed to help a lot but it can be even better.
    Crunching for Team TPU
  4. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,329 (6.32/day)
    Thanks Received:
    3,358
    Location:
    IA, USA
    I got it figured out using this:
    http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx

    Apparently the minimum the WP7 browser supports is 320 pixels wide. My form was at about 200 pixels. I increased the fonts and size of input boxes to fill the 320 space in addition to the viewport command to make it work.


    Edit: With the viewport in, it wouldn't scale to the horizontal size so I removed it. Now, all it has is:
    Code:
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    It appears to be working as expected in vertical and horizontal modes. :D
    stinger608 says thanks.
    Crunching for Team TPU
  5. BiggieShady

    BiggieShady

    Joined:
    Feb 8, 2012
    Messages:
    933 (1.04/day)
    Thanks Received:
    307
    Location:
    Zagreb, Croatia
    Nice :toast: you can even handle different screen sizes with completely different *.css files using media query :

    HTML:
    <link media="only screen and (min-device-width: 0px) and (max-device-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />
    
    <link media="only screen and (min-device-width: 801px) and (max-device-width:9999px)" href="regular.css" type="text/css" rel="stylesheet" />
    
    FordGT90Concept says thanks.
  6. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,329 (6.32/day)
    Thanks Received:
    3,358
    Location:
    IA, USA
    Friend of mine tells me it doesn't look very good on iPhone so my fixes only apply to Windows Phone. MobileOptimized is apparently an IE only thing.


    The problem with viewport is that width doesn't take into account horizontal and vertical renders. Chrome and Safari use horizontal-scale and vertical-scale to account for that whereas IE doesn't have those and instead uses the MobileOptimized parameter where it automatically calculates the scale for both perspectives. IMO, Microsoft has it right. Apple/Google/Mozilla should adapt MobileOptimized and abandon viewport.
    Last edited: Mar 26, 2013
    Crunching for Team TPU

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page