Cargo home Twitter Devlog

Adding modifications for iOS

Last Updated: May 30, 2013 12:51PM PDT
If you are looking to change how your website is displayed specifically on IOS devices, there are a number of methods for doing so, each with different results.

For example, if you are using position:fixed elements (most commonly the text nav and header, as in the Vasarely example design ), these will remain positioned relative to the viewport, and behave differently in IOS devices than they do in desktop computers.  You can get around this in different ways:

1. Use meta tags to choose the initial scale/viewport of your website, in your Custom HTML:
<meta name = "viewport" content = "width = 1380">
ie, "this IOS device's viewport emulates a browser window width of 1380 pixels"

 
2. Prevent scaling completely, through a viewport tag into your Custom HTML:
  <meta name = "viewport" content = "width = 1380, initial-scale = 1, user-scalable = no"> 
For reference: Apple's Developer library.


3. Use position:absolute instead of position:fixed (wherever applicable) in your CSS to prevent your text nav and header image from being positioned independently of your content.


4. Use CSS media queries to define different styles for different elements, for different displays: 
@media screen and (min-device-width: 481px) { 
   .nav_container {
        position: absolute;
        font-size: 18px;
    }
}

@media screen and (min-device-width: 1024px) { 
   .nav_container {
        position: fixed;
        font-size: 14px;
    }
}
For reference, see Apple's Developer library. A good list of media queries for IOS devices is maintained here.
tickets@cargocollective.com
http://assets3.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete