Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
make my website mobile friendly
Options
-
25-02-2013 1:32am#1
Comments
-
-
-
Creamy Goodness wrote: »wouldn't css media queries not be better than having two identical codebases
Yes it would.
You need to remove all of your in-line styles and create two separate style sheets. Don't use fixed widths use percentages, and whatever you do don't float anything.
Then insert links to the relevant style sheet including a media query into your head, something along the lines of this.<link rel="stylesheet" type="text/css" href="./mobileStylesheet.css" media="screen and (max-width:640px)"> <link rel="stylesheet" type="text/css" href="./desktopStylesheet.css" media="screen and (min-width: 641px)">
0 -
-
-
Advertisement
-
[PHP]
<?php
$useragent=$_SERVER;
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|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|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(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|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://mobi.domain.com');
//header('Location: http://domain.com/mobi');
?>
[/PHP]
This may be of use http://detectmobilebrowsers.com/
Also, this:<script type="text/javascript"> <!-- if (screen.width <= whatever) { document.location = "mobile.html"; } //--> </script>
But yeah, as the others said, media queries. Now OP needs to decide if he wants a responsive website or a mobile version. As the site stands, I'm not sure how functional it'd be for someone on a mobile device with big fingers. I haven't tested so maybe it's fine.
For mobile version, take a look over here:
http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
Then have a look at the "additional reading".
For a responsive site, as the others have said, media queries, and the just google responsive web design basics (Check out css tricks and smashing mag).
However, for a quick fix, simply download and implement the following stylesheet: (It's a mobile friendly version of your website
I just edited your current stylesheet slightly )
So for mobiles, just point them to that rather than your default stylesheet.
Probably should have let you do the work yourself but sure it only took a minute. Needs some cleaning up but it's completely functional. Enjoy.
Edit: FYI, I just tested this on the home page, so it may break on other pages. Won't know til you check. Either way it'll get you started.0 -
-
-
However I would also avoid the route of user agent detection, which I believe is what OneIdea's php was doing (see link for why).
Your link has nothing to do with a simple mobile browser detection script 0 -
-
Advertisement
-
-
-
-
-
Monica Flabby Week wrote: »No one had mentioned that the content will render differently
If the content doesn't render differently, it won't be mobile friendly.Monica Flabby Week wrote: »no may need to be moved/removed from the site to accommodate mobile. 0 -
-
Advertisement