Seamless start of mobile version of site when needed?

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.

if theres anything else you need, just ask! – Connor Jun 18 '13 at 11:04 — Connor, Jun 18 '13 at 11:04

score 5 · Accepted Answer · edited May 23 '17 at 12:29

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)
{

}

1 Answers1