change to Zepto and fix size issue on iOS

1 files changed, 54 insertions, 55 deletions

diff --git a/tools/resizer/index.html b/tools/resizer/index.html
index 7c38b6e..d10f10f 100644
--- a/tools/resizer/index.html
+++ b/tools/resizer/index.html
@@ -10,28 +10,28 @@
     <link rel="stylesheet" href="../../dist/spectre.min.css" />
     <link rel="stylesheet" href="../../demo/font/style.css" />
     <link rel="stylesheet" href="assets/css/app.css" />
-    <script src="assets/js/jquery-2.2.3.min.js"></script>
+    <script src="assets/js/zepto.min.js"></script>
     <script>
-        $(document).ready(function() {
+        Zepto(function($){
             var target = $('#viewport');
-            var width = $('#device').width();
+            var width = $('#browser').width();
             var addressClean = '';
             var addressRaw = '';
 
-            $('.option-default').text('Current - ' + width).val(width);
-            checksize(width);
+            $('.option-default').text('Current - ' + width ).val( width );
+            checksize( width );
             load('https://picturepan2.github.io/spectre');
 
             $('#superbar').submit(function() {
-                load( $('#address').val() );
+                load($('#address').val() );
                 return false;
             });
 
             $('#address').focus(function() {
-                $(this).val(addressRaw);
+                $( this ).val( addressRaw );
             });
             $('#address').blur(function() {
-                $(this).val(addressClean);
+                $( this ).val( addressClean );
             });
 
             $('#refresh').click(function() {
@@ -39,75 +39,74 @@
             });
 
             $('#sizes').change(function() {
-                var newWidth = $('#sizes option:selected').val();
-                $('#device').width(newWidth);
-                checksize(newWidth);
+                var newWidth = $('#sizes').val();
+                $('#browser').width( newWidth + 'px');
+                checksize( newWidth );
             });
 
             function load( url ) {
                 if (url.search(/^http[s]?\:\/\//) == -1) {
                     url = 'http://' + url;
                 }
-                target.attr('src', url);
+                target.attr('src', url );
                 addressRaw = url;
                 addressClean = url.replace('http://', '').replace('https://', '');
 
-                $('#address').val(addressClean).blur();
+                $('#address').val( addressClean ).blur();
             }
             function checksize( width ) {
                 if ( width <= 600 ) {
-                    $('#device').removeClass('desktop').addClass('mobile');
+                    $('#browser').removeClass('desktop').addClass('mobile');
                 } else {
-                    $('#device').removeClass('mobile').addClass('desktop');
+                    $('#browser').removeClass('mobile').addClass('desktop');
                 }
             }
-        });
+        })
     </script>
 </head>
 <body class="app-container">
-    <section id="device" class="device">
-        <div class="browser shadow">
-            <header class="browser-header navbar">
-                <div class="navbar-section navbar-section-btns">
-                    <div class="browser-action red"></div>
-                    <div class="browser-action yellow"></div>
-                    <div class="browser-action green"></div>
-                </div>
-                <div class="navbar-section">
-                    <form id="superbar" class="rel" method="post" autocomplete="off">
-                        <input id="address" class="form-input" type="text" placeholder="enter website address" />
-                        <button id="refresh" class="btn btn-link btn-refresh btn-action abs">
-                            <i class="icon icon-refresh"></i>
-                        </button>
-                        <input type="submit" class="hide" value="go">
-                    </form>
-                </div>
-                <div class="navbar-section text-right">
-                    <div class="meta">
-                        <select id="sizes" class="form-select">
-                            <option class="option-default">loading</option>
-                            <option value="1440">Desktop - 1440</option>
-                            <option value="1280">Desktop - 1280</option>
-                            <option value="1024">Desktop - 1024</option>
-                            <option value="960">Desktop - 960</option>
-                            <option value="840">Tablet - 840</option>
-                            <option value="720">Tablet - 720</option>
-                            <option value="600">Tablet - 600</option>
-                            <option value="480">Mobile - 480</option>
-                            <option value="400">Mobile - 400</option>
-                            <option value="360">Mobile - 360</option>
-                        </select>
-                    </div>
+    <div id="browser" class="browser shadow">
+        <header class="browser-header navbar">
+            <div class="navbar-section navbar-section-btns">
+                <div class="browser-action red"></div>
+                <div class="browser-action yellow"></div>
+                <div class="browser-action green"></div>
+            </div>
+            <div class="navbar-section">
+                <form id="superbar" class="rel" method="post" autocomplete="off">
+                    <input id="address" class="form-input" type="text" placeholder="enter website address" />
+                    <button id="refresh" class="btn btn-link btn-refresh btn-action abs">
+                        <i class="icon icon-refresh"></i>
+                    </button>
+                    <input type="submit" class="hide" value="go">
+                </form>
+            </div>
+            <div class="navbar-section text-right">
+                <div class="meta">
+                    <select id="sizes" class="form-select">
+                        <option class="option-default">loading</option>
+                        <option value="1440">Desktop - 1440</option>
+                        <option value="1280">Desktop - 1280</option>
+                        <option value="1024">Desktop - 1024</option>
+                        <option value="960">Desktop - 960</option>
+                        <option value="840">Tablet - 840</option>
+                        <option value="720">Tablet - 720</option>
+                        <option value="600">Tablet - 600</option>
+                        <option value="480">Mobile - 480</option>
+                        <option value="400">Mobile - 400</option>
+                        <option value="360">Mobile - 360</option>
+                    </select>
                 </div>
-            </header>
-            <div class="browser-body">
-                <iframe id="viewport" width="100%" height="100%" frameborder="0" scrolling="auto" allowtrancparency="true"></iframe>
             </div>
-            <footer class="browser-footer"></footer>
+        </header>
+        <div class="browser-body">
+            <iframe id="viewport" width="100%" height="100%" frameborder="0" scrolling="auto" allowtrancparency="true"></iframe>
         </div>
-    </section>
+        <footer class="browser-footer"></footer>
+    </div>
+
     <section class="copyright">
-        <h1>Responsive Resizer v0.1.2</h1>
+        <h1>Responsive Resizer v0.1.3</h1>
     </section>
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){