Help with Mobile CSS - Adaptive Web Design

I

ITVince

New Member
Hi all, trying to do some basic CSS to adapt to mobile sites. I'd like to perform the following.

1. If the user is on their computer and visit my website, I want the background to be BLACK, and show a centered image call it 'image A'

2. If the user is on a mobile device and visit my website, I want the background to be WHITE, and show a DIFFERENT centered image call it 'image B'

Can someone please assist? I've tried using this resource http://www.alistapart.com/articles/responsive-web-design/ however I'm still not have any luck. :confused:
 
C

ccowan

New Member
When it comes to mobile sites, all you do really is just write a script that detects the mobile browser and directs the user to a completely different page which you designed specifically for mobile. The HTML and CSS is exactly the same.
 
anna

anna

New Member
ccowan said:
When it comes to mobile sites, all you do really is just write a script that detects the mobile browser and directs the user to a completely different page which you designed specifically for mobile. The HTML and CSS is exactly the same.
Click to expand...

I am having a similar problem; when you say write a script, would you please explain a little more? I'm not too familiar with scripting. Thank you!
 
C

ccowan

New Member
Sure! If you place this script on your page it will detect a mobile browser and redirect them to a different page:

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];

if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://www.otherpage.com');
}

?>
 
C

ccowan

New Member
Sorry, you need this code at the top of the page before anything else:

<?php
ob_start();
?>

and this at the bottom of the page after everything:


<?php
ob_end_flush();
?>

and as far as the bracket goes that should be necessary but play with it and see if it works now.
 
anna

anna

New Member
ccowan said:
Sorry, you need this code at the top of the page before anything else:

<?php
ob_start();
?>

and this at the bottom of the page after everything:


<?php
ob_end_flush();
?>

and as far as the bracket goes that should be necessary but play with it and see if it works now.
Click to expand...

Would this script go in the <head> tag? Thanks so much for the info!
 
PixelPusher

PixelPusher

Super Moderator
Staff member
ITVince said:
Hi all, trying to do some basic CSS to adapt to mobile sites. I'd like to perform the following.

1. If the user is on their computer and visit my website, I want the background to be BLACK, and show a centered image call it 'image A'

2. If the user is on a mobile device and visit my website, I want the background to be WHITE, and show a DIFFERENT centered image call it 'image B'

Can someone please assist? I've tried using this resource http://www.alistapart.com/articles/responsive-web-design/ however I'm still not have any luck. :confused:
Click to expand...

What browser were you testing your site in? Also, can you post the head section of your page?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
You can use a script to detect mobile devices, but you will need to check based on type. My suggestion would be by mobile OS (e.g. iOS, Android, etc)
 
You must log in or register to reply here.
Top