change to Zepto and fix size issue on iOS

1 files changed, 12 insertions, 11 deletions

diff --git a/tools/resizer/assets/css/app.css b/tools/resizer/assets/css/app.css
index 88493ef..47d1e2f 100644
--- a/tools/resizer/assets/css/app.css
+++ b/tools/resizer/assets/css/app.css
@@ -20,20 +20,16 @@
   font-size: 14px;
   margin: 0;
 }
-.device {
-  height: 80vh;
-  margin: 10vh auto;
-  transform: scale(1, 1);
-  transition: width .216s ease;
-  width: 80vw;
-}
 .browser {
   background: #fff;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   height: 80vh;
-  width: 100%;
+  margin: 10vh auto;
+  transform: scale(1, 1);
+  transition: width .216s ease;
+  width: 80vw;
 }
 .browser .browser-header {
   background: #f8f8f8;
@@ -46,7 +42,7 @@
 .browser .navbar-section {
   flex: 1 0 33.33%;
 }
-.mobile .browser .navbar-section-btns {
+.mobile .navbar-section-btns {
   display: none;
 }
 .browser .browser-header .btn-refresh {
@@ -84,14 +80,19 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   flex: 1 1 auto;
-  height: auto;
+  height: 100%;
+  overflow-y: auto;
   position: relative;
   width: 100%;
+  -webkit-overflow-scrolling: touch;
 }
 .browser .browser-body iframe {
   bottom: 0;
-  height: 100%;
   left: 0;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 100%;
+  min-width: 100%;
   position: absolute;
   right: 0;
   top: 0;