Use Viewport for Specific Widths

Question

I have an interesting problem.

At the company I am working with, we are building a website for a client from a photoshop template design and the site needs to be responsive.

The sites design doesn't crunch well between desktop and mobile, the project being late we decided to design the full width site, and a site for mobile phones.

That being said, this is what needs to happen.

Before 600px, everything just functions like a boring non-responsive website on all devices. At and below 600px, the site becomes responsive.

My problem is viewports. If I specify a viewport, it will look bad on the iPad because it shrinks it to the device scale.

My original idea was to use jQuery to detect window size and at 600px and below, it would insert the meta tag.

But this does not work as without the viewport tag (which screws up that site on any devices bigger than 600px) it cannot detect the actual screen size.

Has anyone ran into this problem before?

Answer 1

The trick was window.screen.availWidth; This got the width of the device without the use of viewports.