[Turn] Front-end development PC and mobile terminal bug summary and some strange skills

It is easy to encounter various strange bugs when writing code. It is recommended to use Fundebug for online bug monitoring in real time.

1. Don't use fastClick if you don't need it, because you will encounter strange problems

http://cdn.bootcss.com/fastclick/1.0.6/fastclick.js

$(function() {  
  FastClick.attach(document.body);
});

2. Suggestions on font settings for mobile development

body {
   font-family: "Helvetica Neue",
   Helvetica, STHeiTi, sans-serif;
}

3. The Mac click event is delegated to the body, and the document will not be triggered  
4. Get the value of the select $("#storeName").find("option:selected").text() 
5. If the mobile terminal uses input type= "date" 

• date - select day, month, year
• month - select month, year
• week - select week and year
• time - select time (hours and minutes)
• datetime - select time, day, month, year (UTC time)
• datetime-local - select time, day, month, year (local time)

The date element is not supported in Internet Explorer or Firefox.
Chrome does not support datetime
, this plugin can convert the time format

6. ios mobile phones and uc browsers on android will prohibit all js scripts when the page slides, save it as a state A, and trigger the scroll event after the slide ends, starting from state A. So you can't use setTimeout for countdown. The time difference can be calculated using new Date.

7. If you use iconfont, pay attention to color and colorless when uploading images. Generally, color icons should retain the color, and solid-color icons should not be retained.

8. CSS3 animation should be written as follows:

-webkit-transition: all 5s;

May not work in some browsers must be written like this:

transition: all 5s;
-webkit-transition: all 5s;

9. Flexible layout vertical center + left and right center

display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;

10.js code to judge Android or Apple

var u = navigator.userAgent;
var isAndroid = u.indexOf ('Android')> -1 || u.indexOf ('Adr')> -1; // android
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

11. Avoid clicking on the PC side to get the focus and the outer shadow is too large

input:focus, textarea:focus, select:focus {
outline-offset: -2px;
}

12. How to use data-href

if($(this).data('href')){
   location.href= $(this).data('href');
 }

13. Force full screen


14. The page is forbidden to slide

function handler() {
  event.preventDefault();
}

// bind the event
document.addEventListener('touchmove', handler, false);

// unbind event
document.removeEventListener('touchmove', handler, false);

15. Click the mouse to run to the end

    var t = $(this).val();
    $(this).val("").focus().val(t);

16. Responsive common classification

html{font-size:10px}


@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}


@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}


@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}


@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}


@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}


@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}


@media screen and (min-width:800px){html{font-size:25px}}

17. ios sliding rubber band effect

-webkit-overflow-scrolling: touch;

18.ios android remove select default effect

-webkit-appearance: none;

IOS select comes with padding: 4em needs to be removed!


19. Get the total width and height of the screen with VW and VH font units.


20. Clear the default style of date on the mobile phone

input[type="date"]:before{
    color:lightgray;
    content:attr(placeholder);
}

input[type="date"].full:before {
    color:black;
    content:""!important;
}

$("#myel").on("input",function(){
    if($(this).val().length>0){
    $(this).addClass("full");
}
else{
   $(this).removeClass("full");
   }
 });

21. Mobile terminal to date placeholder

input[type="date"]:before{
    color:lightgray;
    content:attr(placeholder);
}

input[type="date"].full:before {
    color:black;
    content:""!important;
}

and put somenthing like this into javascript:

$("#myel").on("input",function(){
    if($(this).val().length>0){
    $(this).addClass("full");
}
else{
   $(this).removeClass("full");
   }
 });

22.Mac start and close tomcat

sudo sh /Library/Tomcat/bin/shutdown.sh
sudo sh /Library/Tomcat/bin/startup.sh

23. Confirm and cancel buttons


onclick="javascript:return confirm('Confirm to cancel the queue? This operation cannot be resumed!')"


24. Turn off the automatic capitalization of the first letter of the iOS keyboard


25. Prohibit text scaling

html {
    -webkit-text-size-adjust: 100%;
}

26. Ignore the number on the page is the phone, ignore the email identification


27. The mobile terminal prohibits the selected content

div {
    -webkit-user-select: none;
}

28. How to Prohibit Saving or Copying of Images

img {
    -webkit-touch-callout: none;
}

29. The body needs to set ontouchstart, 


otherwise IOS has no click effect

. 30. IOS can add cursor: pointer; 

31. The audio element and video element cannot be played automatically in ios and andriod

Touch screen to play

$('html').one('touchstart',function(){
   audio.play()
})

32. Turn on hardware acceleration to ensure smooth animation

.css {

     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
  }

you may be interested in

1. 10 Advanced Tips for Debugging with Console
   
2. Detailed explanation of 10 major JavaScript errors from 1000+ project data analysis