CODEWITHSUNDEEP
androidhtmlcss
UzumakiDev
UzumakiDev

Reputation: 1276

I'm having trouble controlling Android browser scale

I have a #scroller which is layered over the top of a menu and I have a button that -webkit-transform: translate3d(265px, 0, 0); to the right.

When it slides to the right, both the scroller and the menu tries to fit on the screen, I don't want this, I want the wrapper to slide off screen.

CSS

html, body {
    font-size: 0.75em;
    overflow:hidden;
    height:100%;
    width:100%;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body:after {
    content:'mobile';
    display: none;
}
a {
    text-decoration: none;
}
/* ------ Wrapper ----- */
 #wrapper {
    position: absolute;
    z-index: 1;
    top: 40px;
    bottom:0;
    left: 0;
    right:0;
    overflow:scroll;
}
#scroller {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}
.slideout {
    -webkit-transform: translate3d(265px, 0, 0);
    position:absolute;
    left:0;
    transition: -webkit-transform .5s ease;
}

I'm not sure what to do to stop Android from trying to fit the whole thing on the screen. I want the #scroller to slide off screen.

HTML

     <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-touch-fullscreen" content="yes">
      <meta name="HandheldFriendly" content="true" />
<body>
<div class="snap-drawers">
</div>
<div id="wrapper">
  <div id="scroller"> 
  </div>
</div>
</body>

Upvotes: 0

Views: 290

Answers (1)

user3274745
user3274745

Reputation: 361

The problem is with:

width=device-width, height=device-height,

If you want the screen to be able to slide up down add this to you meta viewport:

<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>

I hope this works if it doesn't try this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0,  user-scalable=0" />

If it still doesn't work play around with the initial and maximum scale and it should work.

If you want it to scroll left to right add this :

<META NAME="viewport" CONTENT=" height=device-height, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

For mobiles you should add something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=no" />

Use user-scalable=yes to allow zoom in or user-scalable=no to prevent zoom.

These are not necessary remove them they might be causing the problem:

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="HandheldFriendly" content="true" />

Still didn't get them working add css media queries and problem should be solved:

(max-width: 640px){
//add code here//
}
(min-width: 641px) and (max-width: 800px){
//add code here//}

(min-width: 801px) and (max-width: 1024px){
//add code here//}
}
(min-width: 1025px){
//add code here//}
}

Upvotes: 2

Related Questions