1. Add the tag “Header Footer Nav Section”

Semantic benefits: 1 conducive to SEO crawler crawl 2 convenient development and maintenance of short legs, readable 3 convenient parsing other devices (mobile devices) Disadvantages: 1 Ie9 browsers are not compatibleCopy the code

2. Interview question HTML5: How is HTML5 compatible with older browsers (IE8)?

Solution: use html5shiv.jsCopy the code

3. Meta tags for mobile devices: Force document to be 1:1 width of device

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
Copy the code

4. Q: Which numeric keyboard type value should I use on the mobile terminal?

 <input type='tel'>
 
Copy the code

5. Q: How will placeholder change font color (and how will it work with different browsers)?

input::-webkit-input-placeholder {color: #999; }Copy the code

6. Q: How to cancel the first letter of the input box in ios (a compatibility problem)? autocapitalize=’off’

7. How does your project do adaptive layout?

Use Taobao solution: REM (HTML based font size calculation) + flexive. js(dynamic change HTML font size size) UI design map width: 750 with iphone6 as the benchmarkCopy the code

8. Interview question: How can a box be centered horizontally and vertically without giving it width or height

1. Elastic box 2. Transform 3Copy the code

9. Interview question: The default font size for Chrome is 16px, so how do you display a font smaller than 16px?

Font-size :20px; -webkit-transform:scale(.5); }Copy the code

10. Responsive image layout

<picture> <source srcset='images/1000.png'media="(min-width:1000px)"/> // Srcset ='images/700.png'media="(min-width:800px)"/>Copy the code

11. Responsive layout:

<style>
@media only screen and (max-width:992px){
}
</style>
Copy the code

12. Mobile terminal scrolling using iscroll.js file, download:Juejin. Cn/post / 697212…

Official release Chinese document: caibaojian.com/iscroll-5/g…

new IScroll(‘#wrapper’);

IScroll rolling condition: CSS setting requirements: If id=”wrapper” is added, the height of the UL child node to be rolled must be smaller than that of the ul child node to be rolled

13. Q: There is a 300ms delay when using the click event on the mobile end

1. Disable double click scaling === add user-scalable=no 2 to the meta tag. Reference fastclick. Js file download url: https://juejin.cn/post/6972124172734431263 write code:  if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded',function(){ FastClick.attach(document.body); },false); }Copy the code

###14. Interview question: The touch event on the mobile terminal has a penetration problem. How to solve it?

Solution: 1, prevent default behavior e.preventDefault(); 2, fastclick. Js fastclick reference. Js file download url: https://juejin.cn/post/6972124172734431263 2.1 introduced js file 2.2 write code:  if ('addEventListener' in document){ document.addEventListener('DOMContentLoaded',function FastClick.attach(document.body); },false); }Copy the code

15. Zepto’s official website:www.zeptojs.com.cn/

16. Q: The implementation principle of lazy loading on mobile terminal:

Website: https://www.lazyloadjs.cn/ advantage: improve performance principle: picture is through img SRC attribute, when the SRC assignment, the browser will request image resources. Based on this problem, we can use the custom attribute of the tag (data-xxx) to save the path of the image. When we need to load the image, we can assign the value of data-xxx to SRC to realize the on-demand loading. For example, custom attributes: data-xxx <img Alt =" data-src=' image path 2.jpg'>Copy the code

17. Pull down to refresh, pull up to load, download the corresponding Demo plug-in website:www.jq22.com/jquery-info…

18. Mobile: Small questions to ask

<input type="search" placeholder=" search" placeholder=" placeholder "> Onsubmit ="return false" example: <form action="" id="onSearch" onsubmit="return false"> <input type="search" placeholder=" placeholder "> Autofocus ="autofocus" set the cursor color caret-color: #000; Question 3: click on the blanks How to put the key to solve: window. AddEventListener (' touchstart ', function () {document. ActiveElement. The blur (); } -webkit-tap-highlight-color:rgba(0,0,0,0); <input autocapitalize=" capitalize "> img{-webkit-touch-callout:none; } -webkit-user-select:none; -webkit-user-select:none; ul li, a, p, span, h1, h2, h3, h4, h5, h6 { -webkit-user-select: none; } problem eight: URL transfer value, if there are Spaces, Chinese characters, special characters, will transcoding solution: encodeURI == "decodeURI ==" decoding problem nine: remove input type=search behind the X number to solve: input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }Copy the code

19. Event delegation on mobile:

   $('ul').on('tap', 'li', function () {
    alert(1)
  })
  
Copy the code

20. Stage III Video assessment copy record:

This time we do is a education class website, mainly have a PC and mobile terminal For a view of the demand side: first as a front end staff, PC and mobile terminal is responsive to consider, how to do adaptation, adaptive has two options: 1: do a set of PC, after combined with reactive So that we can perfect compatible with mobile terminal 2: Do a SET of PC, a set of mobile terminal, mobile terminal using Taobao infinite adaptation scheme, we are using this scheme two do that we are how to switch between the PC and mobile terminal? For example, hit a PC website, normally enter the PC page, and then take a mobile device to directly access the PC website in the browser, it will automatically jump to the mobile page, we have made a terminal judgment on the PC side, the following focus on the mobile side: Mobile is nothing more than normal data requests to render to the page, but there are more compatibility issues such as: All images do not support long press to copy or download and save images, and text does not support long press to copy. CSS can solve the worthwhile function, is search, when the finger touches the search block, the keyboard will pop up, the search button will appear in the lower right corner, daily input type is search, is newline, not search. So when you do that, you need to wrap the search box with a little detail of the FROM tag. Touch elsewhere, the keyboard to pack up, these compatibility considerations involved lazy loading also have do optimization, including the bottom of the load more data, and data filtering have a good these functions include the path values, decoding and encoding to use, because when Chinese characters or special characters get less than true value, with these details. Generally speaking, the mobile terminal should be tested with a real machine, otherwise it is wrong to test many things with a PC simulator, and the display may have problems. This is basically the whole process of doing the whole project, and the request data is the interface document from the back end. Is there anything else you'd like to ask?Copy the code