Mobile Development Note twos

Review your own prototypes and find a few questions to share

1, mobile minimum touch area 44*44px, then small easy to click or late, can refer to "IOS Human Interface Guidelines": Https://developer.apple.com/library /ios/documentation/userexperience/conceptual/mobilehig/layoutandappearance.html

So how to guarantee the smallest touch area, see Baidu Wireless UE Shiyujie 11 D2 shared a picture ( fingers easily fall on the target right and lower position )

So we can give text, icons, buttons and other operational elements to expand the touch area,padding, line-height , etc. are a good way.

Want to be a good front end, must fully understand the designer's intentions, in the real problem when actually we can find designers to drink coffee what, the general designers are beautiful oh, of course, we just for a better user experience

But if the designer gives the area is not big enough, we can extend this to a small icon.

<!--span is a background map, either by adding padding to span or by setting the extended width height directly on the div ... Then bind the event to the Div -<Divclass= "icon"><span>Icon</span></Div><!--use:: Before or:: After pseudo-element set background, add pseudo-element padding or directly on Div to set the extended width height ... Then bind the event to the Div -<Divclass= "icon">:: Before</Div>

It is recommended to use pseudo-elements, save a layer of nesting, the mobile side is not concerned about the issue of support, there is a method in a specific case (the parent element width limit dead) Use better transform:scale, reference http://m.ctrip.com/webapp/tour/ Vacations?from=ctrip_home

Red Line box out of the microphone, the current version has been hidden, need to self-tuning out, it took advantage of Transform:scale, before the article I have also talked about the difference between Transform:scale and zoom Http://www.cnblogs.com/web-lexi /p/3968050.html

2, the above mentioned event bound to the Div, so I also think of a problem,

Many small partners like to bind events such as child elements, if familiar with the elevation will know the event delegate, the use of event bubbling to bind the performance of the event is far superior to the sub-element, which I do not repeat, after all, the mobile side of the performance requirements are very high, network and hardware without a PC so good

Here we recommend a mobile End performance optimization article http://isux.tencent.com/h5-performance.html

3, finally to a Samsung 3 fixed bug Small tip

When we set the width:100% to the element position:fixed, the width of the cover 3 or the width of the vertical screen is changed, how to solve

① using media queries to re-assign styles on a horizontal screen

{div{width: 100%;} }

② in the fixed element and set a layer of position:absolute,width still 100% can be solved

Article has reference to our original company's nod pig (CSS Goddess Oh) internal sharing of the message, summarized here to share with you, there are questions welcome to point out and discuss

Mobile Development Note twos