Common mobile front-end WebApp Interactive details

#常用的移动前端webapp交互细节 # #select的表现方式 # # #PC端select控件在传统PC桌面已经存在多年, because in the IE6 and other low-version browser prone to the level of confusion, has been discarded by some UI framework, and the div layer to simulate. [Traditional Select control] (http://images.cnitblog.com/i/84053/201407/271218506505629.jpg) # # #移动设备而在移动设备上, the Select control behaves differently, for example, the UC browser, Xiaomi's system browser, and how the Dolphin browser behaves

It can be seen that in order to adapt to the characteristics of the mobile device small screen, many browsers have optimized this transformation. # # #原理与思考此现象的根本原因, HTML is only a document standard, so the implementation of each software (browser) has its specific performance. Indeed, to interact with web standards, only document-level standards can be developed. But it also brings the problem that the appearance is not unified, the control performance and the operation experience are not unified. Like the UC will be selected after the choice of two times to determine, millet and dolphins do not need, millet positioning at the bottom, the other is centered on the performance. # #单行数据内容过长的表现方式 # # #PC端在新闻列表, the article title List of the page, it is easy to appear in the title than the content of the case, the general performance on the PC side is * * Similar to Excel table column width adjustment mechanism * *, (mouse on the above drag to adjust the column width):! [PC-side list display] (http://images.cnitblog.com/i/84053/201407/271238480577480.jpg) http://www.jeasyui.com/demo/main/index.php? Plugin=datagrid&theme=default&dir=ltr&pitem= or you can use * * mouse hint * * to show possible out of range of text # # #移动设备而在移动设备上, the above scenario is not feasible, But we can use another way of expression: ' swipe '. As shown in [Demo page] (http://gh.p2227.com/m/swipe) # # #原理与思考原理是非常简单的, in a wide 100px,overflow non-hidden container inside the 200px content, the container will produce a scroll bar. Then combine the features of the touch device: The scroll bar does not occupy a position and is pressed to scroll through the content. This way of expression becomes very adaptable. # # #组件化的swipejs上面讲到的表现非常原始, for high-volume applications, we generally refer to out-of-the-box components [Swipe.js] (http://swipejs.com/) and use it to process (which may have been integrated in some UI frameworks). The basic principle or the use of the scroll bar, and then add the transform and other new CSS3 features to make it a certain animation effect and close to the original performance. # #按钮的大小与间隔 # # #PC端在鼠标指针控制的PC端, the function buttons can be very small, and can be very compact, such as the classic window in the upper right corner--x three buttons (minimize maximize off), in the upper right corner is very convenient, and the average person is not easy to press the wrong. # # #移动设备而在移动设备上, because of the touch screen and the characteristics of the human finger, the button should be done large and have a certain spacing, the picture of our buttonsThe label may be as shown in the red box, but the functional area of the button should be the entire black box. [Buttons for mobile devices] (http://images.cnitblog.com/i/84053/201407/272046475884820.jpg) # #最后的话最后, evaluate it yourself, I think this article is very intuitive feeling and accumulation, Did not carry out too in-depth analysis and the principle of exploration, mainly want to give a talk, want to discuss with you some user experience things. Then there are some of their own blog plans, listed, so that they often remember to organize ~---state machine---fiddler application (reverse proxy)---angular filter---packaging and publishing tools Ant,grunt (Engineering)