tip: You can use [code ] [/code ] tags around the code in your posts to put them in the formatted boxes.
I don't have a Toshiba Thrive to test it on but I can talk you through what you need to do.
You can't simply whack on a mobile friendly stylesheet and get it behaving nicely - It takes work to get right.
You can remove these - just use embedded media queries in your main css file.
Code:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1024px)" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/mobile.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/mobile.css" />
If you want to make it mobile friendly the right way you'll need to add this so the phone doesn't zoom the content.
Code html5:
<meta name="viewport" content="initial-scale=1.0, width=device-width">
I think you probably want to linearize the menu ( remove floats, show hidden nested menus) - This type of thing.
Code css:
@media only screen and (max-device-width: 480px) {
.menu li, .menu ul {
float: none !important;
display: block !important;
position: static !important;
}
} It's going to take lots of tweaking though.
You can read through some examples here http://dev.opera.com/articles/view/a...-and-viewport/
CSS Corrections for Mobile Devices
Reply With Quote
Bookmarks