Amaze Mobile Development framework: http://amazeui.org/
zepto.js:
http://www.css88.com/doc/zeptojs_api/
Mobile drop-down Refresh plugin: Https://github.com/lightningtgc/material-refresh
Responsive web Design Code implementation: Http://bbs.html5cn.org/thread-86091-1-1.html
reference URL: http://mobile.51cto.com/web-442588.htm http://sentsin.com/web/54.html
GMU is the Zepto-based mobile UI component library: http://gmu.baidu.com/
Mobile Web resource management: Http://www.cnblogs.com/PeunZhang/p/3407453.html#question_17
Some of the common JS event accumulation:
http://bbs.html5cn.org/thread-86615-1-1.html
The Head tab section adds the following code:
<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" Name= " Viewport ">
<meta content= "yes" name= "apple-mobile-web-app-capable" >
<meta content= "Black" name= "Apple-mobile-web-app-status-bar-style" >
<meta content= "Telephone=no" name= "format-detection" >
<!--[if Lt IE 9]>
<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js "></script >
<![ Endif]-->
The first meta tag indicates that the width of the document is forced to remain 1:1 with the width of the device, and the maximum width of the document is 1.0, and the user is not allowed to click on the screen to enlarge;
The second meta tag is the safari private meta tag in the iphone device, which says: Allow full-screen mode browsing;
The third meta tag is also the iphone's private label, which specifies the style of the iphone's status bar on the top of safari;
The fourth meta tag means: Tell the device to ignore numbers on the page as phone numbers FAQ:1. The mobile side recommends hardware-accelerated properties instead of using margin directly. (Transition moves a div,margin will stutter)2.IE8 or older browsers do not support media queries. You can use Media-queries.js or respond.js to add support for media queries in IE. 3. The majority of the 4.7-5-inch devices have a viewport width of 360px;5.5 inch set to 400px;iphone6 set to 375px;ipone6 plus set to 414px. 4.viewport: Can optimize the display of mobile browser. If it is not a responsive web site, do not use Initial-scale or disable scaling. 5. Although the mobile side does not have to write: hover, but the light writes: Active is not enough. Measured Android 2.3 Pressed buttons will leave the browser default color, so remember to: visited also add a color. 6. Do not use pseudo-class when you encounter the animation of writing animation. Otherwise, Android is not effective. 7. When using Flexbox to make equal, remember to give width. Otherwise, if the content is different in Android, it will open up. 8. The capture of iOS Safari,click is considered as the default behavior of the browser, which can be blocked by Event.preventdefault (), just like scrolling, tapping the input box and bouncing the keyboard. 9.position:fixed in the cell phone compatibility is not very good, especially in the UC, if the requirements are relatively high, be honest with JS write it. 10.-webkit-tap-highlight-color:This property is only available for iOS (iphone and ipad). When you click on a link or a clickable element defined by JavaScript, it will appear with a translucent gray background. To reset this performance, you can set-webkit-tap-highlight-color to any color. To disable this highlight, set the color's alpha value to 0, which is Rgba (0,0,0,0). 11. Make the text in HTML not selectable, disable the long-press image popup saved menu:Img{-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
User-select:none;
} 12. Common custom ScrollBar effect in development:::-webkit-scrollbar:{width:8px;height:8px;} Width of blood trough::-webkit-scrollbar-thumb{border-raidus:3px;} Drag Bar::-webkit-scrollbar-track{border-radius:6px;} Background SlotsiOS Native scrolling callback effect:-webkit-overflow-scrolling:touch;13.html+js Completion of touch screen action recognition: http://bbs.html5cn.org/thread-84163-1-1.html14. In order to avoid fixed on iOS display misplaced problem, layout can be used page{position:absolute;left:0;right:0;top:0;bottom:0;} Absolute positioning first in the parent, page to want to stretch, need to add html,body{height:100%;} Box-flex Elastic Box Model (Telescopic layout): http://www.cnblogs.com/acmilan/archive/2012/03/02/2377812.html Test Media Queries (responsive layout): http://responsivator.queenslandwebplan.com/ syntax structure and usage:@media Device name only (select condition) not (pick condition) and (device selection condition), device two {srules}//Horizontal screen
@media screen and (Orientation:landscape) {
}
Vertical screen
@media screen and (orientation:portrait) {
}
Css3-media two ways to apply a responsive layout to query:1. In the Head Header tab, add Media= "only screens and (max-width:480px)" to the link tag in the Reference outreach style 2. Add in style style tag: @media screen and (min-width:480px) {Style Property} Recommendation: 1. Emphasis should be placed on the logo and text of the Web page. If text can be easily read on a mobile device, then you won't have a problem with the tablet and desktop platforms. 2. If your site has only two to three navigation buttons, you can include these buttons in a simple menu on the screen. If you have more menu elements, you might want to consider creating a single icon with a drop-down menu item. 3. When creating a mobile page, it is important to have the button design enough to cover the size of the fingertips, and the other point is to keep the interface both concise and practical. Many designers tend to add too many elements to the mobile interface, which can lead to problems with design and usability. When in doubt, keep the page simple. 4. When creating a responsive design layout, use an optimized image for each layout. This reduces scaling and broadband issues, using JPEG, GIF, and PNG-8 format images instead of PNG format because it expands your file size by 5 to 10 times times. 5. Use only the necessary text, rather than copying your desktop computer design to your mobile side. The latter often results in long-term scrolling of the page, and this bad experience will make you lose a lot of users on the mobile side. 6. Be careful when using the API. One of your occasional behaviors can lead to site performance issues. If in doubt, test the component first. 7. Be sure to remove all non-essentials when designing your website, which will significantly shorten the page load time.
Mobile Web development (responsive design)
