homepage Welcome to WebmasterWorld Guest from 54.211.47.170
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
Forum Library, Charter, Moderator: open

Mobile Web Site Design and Development Forum

    
auto-changing design to fit mobile
aspect-ratio & orientation-specific CSS
sssweb




msg:4604795
 1:06 pm on Aug 25, 2013 (gmt 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.

 

Wayder




msg:4605908
 9:30 pm on Aug 29, 2013 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved