Created
November 16, 2012 18:57
-
-
Save johnpolacek/4089898 to your computer and use it in GitHub Desktop.
Responsive Viewport
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.