何时需要无缝启动网站的移动版本？

Question

I have javascript in my page that detects mobile browsers and makes css adjustments to site, making it appropriate for mobile use.

But the site first shows up still in "Desktop" version and then takes some time to reformat itself. This produces upleasant load experience.

I appreciate a good recipe about how to instantly show mobile version instead of desktop version, with js or any other ways.

Answer 1

You can do a redirect to a mobile page

<script type="text/javascript">
<!--
if (screen.width <= 700) {
document.location = "/mobile";
}
//-->
</script>

Or for a same-page css fix use:

@media screen and (max-width:800px) {

// then put your mobile css in here

}

Same thing, but specific to iPhone 5

@media screen and (device-aspect-ratio: 40/71)
{

}

more info here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ and iPhone 5 CSS media query