Best practices for mobile Web front-end development

Best practices for mobile Web front-end development

• Safari,android Browser,chrome are all WebKit-centric.
• Page reality differences between mobile devices and PCs (viewport is defined in Safari)
• Event bindings differ (move contacts) in mobile device and desktop Web front-end development
• Page control design differences (touch sensitive, virtual keyboard popup)
• Mobile devices have generally slower network bandwidth than PCs, and mobile pages are more compact to set up

PC page compatible with mobile devices

• Using streaming layouts
• With CSS Media queries (media query) technology
• Display compatible solutions with the right picture
• Keep the page simple, do not use page incompatible technologies (Flash technology downgrade scheme, try not to use, use HTML5 Canvas, avoid using playback, network connection, storage, access to local files, etc.)
• Set viewport
  
  
  • Add an operational area for links and buttons
  • Using the Responsive design framework (Bootstrap,zurb Foundation,skeleton)
  • Use the tool to check the mobile compatibility of the Web page: mobiready,w3c mobileok checker,ipadpeek Let the user enter the test URL, Howtogomo in addition to display screenshots also provide suggestions

Preparing to develop a mobile web site

• Identify supported mobile devices (size, DPI, memory, CPU performance, common browser version, etc.)
• Processing and desktop-side main site interaction (user-agent, using JS to determine the recommended use of Mobile-detect,ismobile, provides a lot of interface calls, the simplest include ismobile,istablet)
• Design a mobile site for single-page mode to avoid page jumps
• Select a suitable front-end frame (Jquery-mobile,sencha touch,kendo-ui,ionic)
• How to debug a mobile page (the Dev that comes with chrome, including the device model, screen size, User agent, etc.)

Best Practices for mobile end

• HTML Best Practices:

  • Add the necessary meta and link information to the page head:

        <!--declaring a document with a character encoding--                <meta charset=' utf-8 '>                <!--prefer to use the latest version of IE and Chrome --                <meta http-equiv="x-ua-compatible" content="Ie=edge,chrome=1" />                <!--page description --                <meta name="description" content="No more than 150 characters"/>                <!--page keywords --                <meta name="keywords" content=""/>                <!--page author --                <meta name="Author" content="name, [email protected]"/>                 <!--search engine crawl --                <meta name="Robots" content="Index,follow"/>                <!--add viewport to your mobile device                <meta name="viewport" content="initial-scale=1, Maximum-scale=3, minimum-scale=1, User-scalable=no ">                <!--' Width=device-width ' will cause a black edge when IPhone 5 is added to the main screen to open the page in WEBAPP full-screen mode HTTP://BIGC.AT/IOS-WEBAPP-VIEWP Ort-meta.orz --                <!--IOS devices begin --                <meta name="Apple-mobile-web-app-title" content="title">                 <!--title added to the home screen (IOS 6 new) -                <meta name="apple-mobile-web-app-capable" content="Yes" />                <!--whether to enable WEBAPP full screen mode, remove Apple's default toolbar and menu bar --                <meta name="Apple-itunes-app" content="App-id=myappstoreid, Affiliate-data=myaffiliatedata, App-argument=myurl ">                <!--add Smart App ad strip Smart app Banner (IOS 6+ Safari)--                <meta name="Apple-mobile-web-app-status-bar-style" content=" Black "/>                <!--set the Apple toolbar color --                <meta name="format-detection" content="Telphone=no, Email=no" />                <!--ignore the numbers in the page to recognize the phone, ignoring email identification                <!--fast mode with 360 browser enabled (WebKit)- -                <meta name="renderer" content="WebKit">                <!--prevent IE from using compatibility mode --                <meta http-equiv="x-ua-compatible" content="Ie=edge">                 <!--Don't let Baidu transcode --                <meta http-equiv="Cache-control" content="No-siteapp" / >                <!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and                <meta name="handheldfriendly" content="true">                 <!--Microsoft's Vintage browser--                <meta name="mobileoptimized" content=" +" >                <!--UC Force vertical screen --                <meta name="screen-orientation" content="Portrait" >                <!--QQ forced vertical screen --                <meta name="x5-orientation" content="Portrait" >                <!--UC Mandatory fullscreen --                <meta name="Full-screen" content="yes">                <!--QQ Mandatory fullscreen --                <meta name="X5-fullscreen" content="true">                <!--UC Application Mode --                <meta name="Browsermode" content="Application" >                <!--QQ Application Mode --                <meta name="X5-page-mode" content="App">                <!--windows Phone Click No Highlight --                <meta name="msapplication-tap-highlight" content="No" >                <!--iOS icons begin --                <link rel="apple-touch-icon-precomposed" href="/ Apple-touch-icon-57x5-precomposed.png "/>                <!--iPhone and ITouch, default 57x57 pixels, must have- -                <link rel="apple-touch-icon-precomposed" sizes="114x114"  href="/apple-touch-icon-114x14-precomposed.png"/>                <!--Retina IPhone and retina itouch,114x114 pixels, can be no but recommended--                <link rel="apple-touch-icon-precomposed" sizes="144x144"  href="/apple-touch-icon-144x14-precomposed.png"/>                <!--Retina ipad,144x144 pixels, yes No but recommended-                <!--IOS icon End --                <!--IOS splash screen begin --                <link rel="Apple-touch-startup-image" sizes="768x1004"  href="/splash-screen-768x1004.png"/>                <!--iPad vertical screen 768 x 1004 (standard resolution)--                <link rel="Apple-touch-startup-image" sizes="1536x2008"  href="/splash-screen-1536x2008.png"/>                <!--iPad vertical screen 1536x2008 (Retina)--                <link rel="Apple-touch-startup-image" sizes="1024x748"  href="/default-portrait-1024x748.png"/>                <!--iPad Horizontal screen 1024x748 (standard resolution)--                <link rel="Apple-touch-startup-image" sizes="2048x1496"  href="/splash-screen-2048x1496.png"/>                <!--iPad flat screen 2048x1496 (Retina)--                <link rel="apple-touch-startup-image" href="/ Splash-screen-320x480.png "/>                <!--iphone/ipod Touch vertical screen 320x480 (standard resolution)--                <link rel="Apple-touch-startup-image" sizes="640x960"  href="/splash-screen-640x960.png"/>                <!--iphone/ipod Touch vertical screen 640x960 (Retina)--                <link rel="Apple-touch-startup-image" sizes="640x1136"  href="/splash-screen-640x1136.png"/>                <!--iPhone 5/ipod Touch 5 Vertical screen 640x1136 (Retina)--                <!--IOS splash screen End --                <!--IOS Device end --                <meta name="Msapplication-tilecolor " content="#000"/>                 <!--Windows 8 tile Color --                <meta name="Msapplication-tileimage" content="Icon.png" />                <!--a Windows 8 tile icon --                <link rel="alternate" type="Application/rss+xml" title ="RSS" href="/rss.xml"/>                <!--add RSS subscriptions --                <link rel="shortcut icon" type="Image/ico"  href="/favicon.ico"/>                <!--Add Favicon icon --                <!--SNS Social tags begin --                <!--reference Micro-Blog API --                <meta property ="Og:type" content="type" />                <meta property ="Og:url" content="url address" />                <meta property ="Og:title" content="title" />                <meta property ="Og:image" content="Picture" />                <meta property ="Og:description" content="description" />                <!--SNS Social tags end --

  • The convenience of using mobile devices (GPS functions, etc.)

      <a href="tel:1-406-666-xxxx">1-406-666-xxxx</a>    <a href="sms:1-406-666-xxxx">1-406-666-xxxx</a>

  • Do not use IFRAME, use table sparingly, use ul,ol instead of table to display data
  • If you must use the Workaround for table:
    
    • Hide low-priority data columns in a small-screen device according to the priority of the displayed data
    • Change the horizontal arrangement of the table to a vertical arrangement
    • Links introduce APIs that are provided with Web pages, with XML or JSON to introduce
• CSS Best Practices:
  
  • Set dimension elements using relative units
  • Click on the control to set the size large enough
  • Allow large enough space between the control points
  • Try to use less images and inline diagrams instead of small pictures
  • Working with images: Web Fonts,font awesome,bootstrap glyphicons, etc.
  • Convert small images into Base64 format and use data URLs technology to write images directly in CSS or HTML documents, reducing the number of requests for images
  • Do not use pseudo-class hover to set hover effects
  • Set a reasonable font size (16px) and line height (1.5px)
  • Disable text selection in areas where you don't need to select text
• JS Best Practices:
  
  • Use event handling specific to mobile platforms (gesture Touch Touchstart,touchmove,touchend,touchcancel)
  • Tap and Taphold events, toggle events (Orientationchange)
  • Use standard dialogs sparingly, avoiding pop-ups (window.open)
  • Use timer sparingly (avoid tasks with accurate control of time)

Best practices for mobile Web front-end development