mobile notes

   
//Forbid copying, select the text
Element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
     user-select: none;
}


//Long time press the page to flash Back
element {
    -webkit-touch-callout: none;
}


//The default inner shadow of the input box under the iphone
Element{
    -webkit-appearance: none;
} //The font size problem when rotating the screen *{    -webkit-text-size-adjust :100%;  } //Set the cache     <meta http-equiv="Cache-Control" content="no-cache" />   If you don't want to use the cache, you can set no-cache. //Desktop icon problem     <link rel="apple-touch-icon" href="touch-icon-iphone.png" />















    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />


<input type="text" id="testInput">
<script type="text/javascri [/color]pt">
    document.getElementById(‘testInput‘).addEventListener(‘input‘, function(e){
        var value = e.target.value;
    });
</script>


[color=darkblue]
//浏览器私有及其它meta

    QQ浏览器私有
        全屏模式    <meta name="x5-fullscreen" content="true">
        强制竖屏    <meta name="x5-orientation" content="portrait">
        Force Landscape <meta name="x5-orientation" content="landscape">
        App Mode <meta name="x5-page-mode" content="app">
    UC Browser Private
        Fullscreen Mode<meta name="full- screen" content="yes">
        Force portrait <meta name="screen-orientation" content="portrait">
        Force landscape <meta name="screen-orientation" content="landscape">
        App mode<meta name= "browsermode" content="application"> //The background of the mobile terminal cannot be fixed . When a fixed background is made on the mobile terminal (using fixed), the scroll bar will scroll, and the background image will scroll. The following solution can solve this problem: body: before {   content: ' ';   position: fixed;   z-index: -1;   top: 0;   right: 0;   bottom: 0;   left: 0;   background: url(...) center 0 no-repeat;













  background-size: cover;
}


//border-radius
When border-radius is set to an odd number, it is round on PC, but not on mobile phones, so when making, make border-radius an even value.
//Circular
width:8px;
height:8px;
border-radius:50%;

//non-circular
width:9px;
height:9px;
border-radius:50%; //input keyboard events keyup, keydown, The keypress support is not very good     . The problem is this. When using input search to do a fuzzy search, enter a keyword in the keyboard, it will be queried through the ajax background, and then the data will be returned, and then the returned data will be marked with red keywords. Using input to monitor the keyboard keyup event is possible in the Android mobile browser, but it is very slow to turn red in the ios mobile browser. After inputting with the input method, the keyup event is not immediately responded, only after deleting it can respond!     Solution: You can use the oninput event of html5 to replace keyup[/size][/size] Error contact email: [email protected]






Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326678164&siteId=291194637