Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en" class="no-js responsive">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
- <style type="text/css">
- .content { margin: 0 auto; }
- .responsive .content{ background:yellow; width: 70% }
- .responsive .fixed-width-link { display: block; }
- .responsive .responsive-link { display: none; }
- .fixed-width .content { background:red; width: 600px; }
- .fixed-width .fixed-width-link { display: none; }
- .fixed-width .responsive-link { display: block; }
- </style>
- </head>
- <body class="">
- <script type="text/javascript">
- (function(doc, classToAdd){
- doc.className = (doc.className).replace("no-js", classToAdd);
- })(document.documentElement, "js");
- function FixedWidth() {
- if (window.location.hash == "#fixed-width") {
- (function(doc, classToAdd) {
- doc.className = (doc.className).replace("responsive", classToAdd);
- })(document.documentElement, "fixed-width");
- viewport = document.querySelector("meta[name=viewport]");
- viewport.setAttribute('content', 'width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0');
- }
- }
- function Responsive() {
- if (window.location.hash == "#responsive") {
- (function(doc, classToAdd) {
- doc.className = (doc.className).replace("fixed-width", classToAdd);
- })(document.documentElement, "responsive");
- viewport = document.querySelector("meta[name=viewport]");
- viewport.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0');
- }
- }
- window.onload = FixedWidth;
- window.onload = Responsive;
- </script>
- <div class="content">
- <h1 class="fixed-width-link">Responsive</h1>
- <h1 class="responsive-link">Fixed Width</h1>
- <a href="#fixed-width" onclick="return FixedWidth()" class="fixed-width-link">Fixed Width</a>
- <a href="#responsive" onclick="return Responsive()" class="responsive-link">Reponsive</a>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement