Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

auto-changing design to fit mobile

aspect-ratio & orientation-specific CSS

1:06 pm on Aug 25, 2013 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 10, 2005
votes: 0

I want to make my website more mobile friendly by delivering css styles suited to smallscreen display. My design is basic: I have a background pic with 'fixed center center' positioning that fills the screen. Centered on it, I have a relatively small (~500x500px) textblock with content.

I've made small mobile versions of the background pic w/minimal border space so that the textblock isn't scaled down much by the mobile device. Fine so far.

My issue is dealing with layout changes for different screen orientations & aspect ratios. I've designed for 4 cases: portrait and landscape mode, each with low & high AR's. I have a function that fires on window resizing, but I'm having trouble identifying what css and viewport meta info to change.

Here's what I've got so far:

1. When the page loads, I check screen size, orientation & AR and deliver the correct display. Included is the following meta tag:

<meta name="viewport" content="width=550">

Width = that of my background pic, which is wider for landscape mode. I've tested in the two default cases (portrait & landscape, w/toolbars) and it looks fine.

2. On every resize event, the following runs:

function changeDisplay() { 
// 1. check screen vars & compare against previous; if different:
// 2. send to 1 of 4 orientation/AR conditionals that set the following:
$('body').css('width', '1000px');// added later, but still doesn't work
$('meta[name=viewport]').attr('content', 'width=1000');
$('.bodyClass').css('background-image', 'url(/newPic.jpg)');
window.onresize = changeDisplay;

I use window.innerWidth to get/set the values.

The main problem is that when I start in portrait mode and change to landscape, the new background pic is cropped at 'portrait' size and stretches to big as it fills the screen. If I start in landscape and change to portrait, the new pic is small and doesn't fill the screen. It seems like a scaling issue -- I've played around with the meta viewport scaling, but can't get that working either.

3. My background css includes width: 100% to fill the screen; I've seen suggestions to use min-width instead, but can't really get that to work either.

4. A minor tangential issue is that the resize function fires multiple times on every resize; likely due to my setting changes in addition to the user action; doesn't seem to affect performance, but wonder if there's a way to deal with it w/o missing any true resize events.
9:30 pm on Aug 29, 2013 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:May 2, 2004
posts: 85
votes: 0

IMHO you donít need js to do this, css does me fine.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/default.css">

css file contains

@media print,screen and (min-width:481px){
@media screen and (min-width:500px){
@media screen and (min-width:769px){
@media screen and (min-width:1000px){
@media screen and (max-width: 480px){
@media screen and (max-width: 320px){

If a screen is rotated, the css will catch and format it accordingly.