Responsive Viewport

responsive-viewport

<script language="javascript">
    // set viewport to zoom to 1200px wide on viewports > 640px wide
    var viewPortTag = document.createElement('meta');
    viewPortTag.id = 'viewport';
    viewPortTag.name = 'viewport';
    if (screen.width > 640) {
        viewPortTag.content = 'width=1200';
    } else {
        viewPortTag.content = 'width=device-width';
    }
    document.getElementsByTagName('head')[0].appendChild(viewPortTag);
</script>

Idea for having a fixed width site that scales to the viewport on mobile, then at a certain point goes fluid width single column. This would be for setting the viewport meta on page load. Say you have a big wide website that looks good on 1200 wide, the viewport setting zooms the website to fit nice on tablets. Then you do a media query to detect small screen and have css that turns your fixed width to a single column grid.