GetSimple Support Forum

Full Version: Mobile
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I tried the existing solutions on Extend, they are pretty sucky honestly.
All I need to do is load a different CSS file when it's on an iPhone, Android, or Windows Phone.
How would I do that? Perhaps some sort of PHP if/or pertaining to the useragent?
If we can figure it out I'll make a plugin and upload to Extend.
(2013-12-30, 14:18:56)noodles415 Wrote: [ -> ]I tried the existing solutions on Extend, they are pretty sucky honestly.
All I need to do is load a different CSS file when it's on an iPhone, Android, or Windows Phone.
How would I do that? Perhaps some sort of PHP if/or pertaining to the useragent?
If we can figure it out I'll make a plugin and upload to Extend.

It isn't too hard, it doesn't require php and it isn't really a GetSimple question. You need to learn about media queries.
Ok, but that does not work with GS??
You can certainly select a different css file by using media queries. The quality of files in extend is very variable - that's the result of making it totally open - but there is some good stuff there.
Ok, can you link me? There are so many I have tried that don't work for one reason or another but I am dying to find a proper solution for this and would be more than happy to share the perfect solution excuse any typos from my iphone thank you very much!
I am absolutely not an html guru or expert so first the disclaimer - what I tell you is only probably true.

The answer to your question - I don't know if you can specify css by device type beyond screen and print (and projector?) but it is normally done by screen (or window) size alone with break point at around 640-720 being the width below which is 'phone' or 'hand-held'. So if you want to add declarations to your existing css for mobiles you write something like:
Code:
@media screen and (max-width: 680px) {
p {line-height: 100%; }
aside {display: none}
}
If you want to have a whole different css for mobiles you write in you template <head> something like
Code:
<link rel="stylesheet" type="text/css" media="all and (min-width: 700px)" href="<?php get_theme_url(); ?>/style.css" />
<link rel="stylesheet" type="text/css" media="all and (max-width: 700px)" href="<?php get_theme_url(); ?>/stylemobile.css" />

Just that (plus percentages instead of pixels) will get you a responsive site, or effectively a separate mobile site but a lot of people like to make sites on a prepared framework or a grid system or a boilerplate css. Whichever one you choose to use you will need to learn it's methods and conventions. The top two in the world are Bootstrap and Foundation. Bootstrap works really well with GetSimple and rick parish has done a fine job on turning it into a theme:
http://get-simple.info/extend/theme/bootstrap3/736/
There was a bloke doing a foundation theme but last time I looked it was still in beta and he seems to have gone away:
http://get-simple.info/extend/theme/foun...theme/598/
There is also my own port of the skeleton css, simple and easy to learn but not cutting edge any more: http://get-simple.info/extend/theme/gskeleton/610/
or any of the pure css themes like: http://get-simple.info/extend/theme/pure-side-menu/748/

Hope that helps. Let us know how you get on.
I disagree - for example both my 46" TV, 23" Computer Monitor, 15" Laptop Monitor, and 4.7" Phone all have the same 1920x1080 resolution. However, the mobile site would be wanted on the phone, but not on the laptop, computer, or TV... see?