Mobile Common Troubleshooting

In the normal development process, often encounter some difficulties and complications, here record the commonly used solutions.

0.5px line requested by Miss UI

Reason: Compatibility is different for different mobile phones, especially Android
The Safari performance of IOS is good, and safari can support floating-point attributes.Therefore, 0.5px is achievable in IOS systems.However, under Andriod phones, some Andriod browsers do rounding of floating-point data by setting border-width:0.5px for an element, which behaves the same as setting border-width:1px for you.

Option 1: Zoom in twice and then zoom out

// Zoom in and out
&:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #565D66;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -o-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}

Option 2: Modify the transparency to 0.5, the lines around it will look much lighter, maybe you can trick your sister.

Click through question

Reason: Mobile browsers provide a special feature: double tap to zoom in.Causes the well-known 300 ms time delay problem.A click is triggered about 300 ms after a touch Series event occurs, and mixing touch and click can cause a point perspective problem.

Option 1: 300 milliseconds before the pop-up window disappears, making an animation disappear effect transition.

setTimeout(() => {
    dialog.close();
}, 300);

Scenario 2: 300 ms after touchStart is covered by a transparent invisible div, and the second click is a point less than the corresponding a.

// html
<body>
    <div id="preventClick"></div>
</body>

// js
function onDeviceReady() {
    setTimeout(function(){ $('#preventClick').hide(); }, 300);
}

Option 3: Using fastClick, I think it's the easiest way to do it

Option 4: Change all page clicks to clicks, which will feel slow

Scenario 5: Change all page events to touch events, but it is important to note that the href of tag a is also a click.

Android browser text vertically centered

Reason: The line-heights attribute is often used in development to achieve vertical centering of text, but there is a common compatibility issue in Android browser rendering, that is, for fonts less than 12px, especially odd font sizes, when using line-heights attribute for vertical centering, rendering resultsGo up a little.

Option 1: Zoom in twice and then zoom out twice with scale

div {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0%, 0%;
}

Scenario 2: Use table layout

// html
// Need to cover one floor outside
<div class="wrap">
    <span class="content">aaa</span>
</div>

// css
.wrap {
    display: table;
}
.content {
    font-size: 10px;
    display:table-cell;
    vertical-align: center;
}

Soft keyboard obscures input box after focus

Try scrollIntoView on the input element to fix it.

// Android phone, keyboard blocks input box
if (/Android/gi.test(navigator.userAgent)) {
    window.addEventListener('click', function () {
        try{
          if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
              var inputType = document.activeElement.type;
              if(inputType == 'checkbox') return;
              setTimeout(function() {
                document.activeElement.scrollIntoView(true);
              }, 0)
          }
        }catch(e){
          console.log('Android Compatible Keyboard Blocks Input Box Errors', e);
        }
    })
}

fixed+Input

Reason: Fixed element under ios is easy to locate incorrectly, affecting fixed element location when soft keyboard pops up.Under some Androids, keyboard pop-ups cause the window height (the height of the html tag) to decrease, while fixed positioning is relative to the html root element, so it will be topped.

Option 1: When the soft keyboard pops up, change the fixed positioning elements to block s, return to the document stream, and when the input box loses focus, change to fixed positioning, and record the scrollbar distance.

var screenHeight = document.body.offsetHeight; // Get the original height of the view
window.onresize = function(){
    if (document.body.offsetHeight < screenHeight) {
        document.getElementsByTagName("nav")[0].style.display = "none";
    }else{
        document.getElementsByTagName("nav")[0].style.display = "block";
    }
};

Scenario 2: iscroll handles fixed scrolling better.

Prohibit scrolling under the mask

Reason: Pop-up windows are a common way of interacting, and a mask is an essential element of a pop-up window.However, if the mask element slides too long and goes to the end of the content, the page at the bottom of the mask will start scrolling.This is because the bubble is triggered, causing the parent element to scroll along.

Solution: Simple, just prevent bubbles.Set the scroll container and pop-up window as siblings.

// css
#root{
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
} 


Tags: Javascript Android iOS Mobile less

Posted on Sat, 03 Aug 2019 01:08:44 -0400 by mshen