meteor Mobile Apps Page Layout on Different Devices - CSS
Example
If your application is going to run on different devices, it's going to need to render to different ViewPorts, based on the device size. You can deal with this in two ways: with javascript rules, or CSS media styles. If you've been using a MVC or MVVM library, such as Angular or Ember (or Blaze, for that matter) and have only been targeting a single device or hardware platform, you may need to rethink your MVC model as different hardware ViewPorts are introduced to your application.
// desktop
@media only screen and (min-width: 960px) {
}
// landscape orientation
@media only screen and (min-width: 768px) {
}
// portrait orientation
@media only screen and (min-width: 480px) {
}
You'll need to figure out if you want to break the styles at 768px (portrait mode) or at 1024 pixels (landscape). That's assuming your target mobile device is the iPad, which uses a 3:4 ratio. Otherwise, you'll need to work out the aspect ratios of the devices you do want to target, and figure out the threshold levels from there.
