Big Bear {{bb}} Mobile Development Journey (Season 1)_html/css

1. Opening overview

Hi, everyone! Mr. Big Bear meets you again. Starting from this article, I want to talk to you about the topic of mobile development. This part of the article has a total of 8 seasons, explaining what is mobile development from different angles? What technical aspects are involved in mobile development as well as common problems and complications in mobile development.

What we refer to as mobile development is actually the use of web technology------it mainly includes "h5, css3, javascript" and other technologies, through (Phonegap/Cordova-a It is cross-platform and has a whole set of related ecosystem including tools, forums and developers. You can use it to develop using HTML5 API and native API. Create a real mobile application. This platform also complies with the HTML5 specification to assist in the conversion of web applications)

It has unparalleled advantages in cross-platform and portability.

Background understanding: The following is an infographic that provides us with a detailed comparison of the differences between the three mobile development routes of pure web (HTML5), hybrid App (Hybrid) and native App (Native).

Some key differences:

Difficulty of development Mobile web and hybrid App development are relatively difficult for web developers Lower, and can make full use of existing web development tools and workflows

Release channels and update methods------Hybrid Apps can be released in the App Store, but can be updated independently, while native App updates must be accessed through the App Store App Mobile device local API ------Hybrid App can access the camera and GPS of the mobile device through JavaScript API, while native App can access the device through native programming language All features.

Cross-platform and portability------Browser-based mobile web has the best portability and cross-platform performance; hybrid App can also save cross-platform time and cost, just write The core code can be deployed to multiple platforms once, and the cross-platform performance of the native App

Search engine friendly------Only the mobile web is search engine friendly and can be combined with online marketing

Monetization------In addition to advertising, hybrid apps also support paid downloads and in-app purchases; the in-app purchase amount of native apps exceeded for the first time in 2012

Message push------only Hybrid apps and native apps support push messages, which can increase user loyalty.

Second, enter the topic of mobile development

As far as mobile application development based on web technology is concerned, the essence remains unchanged, unlike PC End-to-end development is very similar, so changing the soup does not change the medicine. No matter what type of application, there must be a friendly interface interaction. The first is the issue of layout. Mobile layout and traditional PC-based

browser layout method There are still differences, so today I will start with the layout and gradually improve from the shallower to the deeper. Okay, let’s get to the key part. Let’s look at a little chestnut first, like this:

We divide it into three steps. This matter:

(1), prepare to test the virtual device, I am using the gadget that comes with chrome 　

(2), create an html page, such as "bb.html" bb.html

The css code is as follows:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta charset="utf-8"> 5   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> 6   <meta content="yes"name="apple-mobile-web-app-capable"/> 7   <meta content="black"name="apple-mobile-web-app-status-bar-style"/> 8   <meta name="format-detection"content="telphone=no"/> 9   <title>大熊君移动开发之旅</title>10   <link rel="stylesheet" href="bb.css" media="all">11 </head>12 <body>13   <header class="header">大熊君移动开发之旅</header>14   15   <div class="wrap-page">16     <div class="page">17       <p>哈哈哈，我是大熊君{{bb}} (●'?'●))18        <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 19 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 20 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 21 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 22 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 23 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 24 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 25 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 26 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 27 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 28 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 29 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 30 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 31 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 32 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 33 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 34 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 35 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 36 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 37 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 38 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 39 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 40 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 41 </div> 42 </div> 43 <footer class="footer">如果大家喜欢，推荐哦~~~</footer> 44 </body> 45 </html>

Copy after login

🎜>　

Three, analyze

 1 .header,.footer,.wrap-page{ 2   position:absolute; 3   left:0; 4   right:0; 5     color:#f8f8f8; 6 } 7 .header,.footer{ 8   height:44px; 9   background-color: #fff;10   text-align: center;11   z-index:900;12   line-height:44px;13    background:#C10066;14 }15 .header{16   top: 0;17   border-bottom: 1px solid #f00;18 }19 .footer{20   bottom: 0;21   border-top: 1px solid #f00;22 }23 .wrap-page{24   top: 44px;25   bottom: 44px;26   overflow-y:auto;27   -webkit-overflow-scrolling:touch;28   color:#333;29 }30 .page{31   padding: 10px;32 }33 .page p{34   margin-bottom: 10px;35 }

Copy after login

　2. 🎜>

If the performance is not good, compatibility can be handled through js. The specific layout should follow three principles. 1------Use the percentage method. Regardless of width, height or font size, it is handled in the same way.

　2------Use relative layout method. 3-------Set meta tags for some preset processing of mobile applications.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />// 上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩放），在网页加载时隐藏地址栏与导航栏（ios7.1新增）。

Copy after login

(4), final summary

(1), use percentages for reasonable layout.

(2), use relative layout.

width ? viewport的宽度height ? viewport的高度initial-scale ? 初始的缩放比例minimum-scale ? 允许用户缩放到的最小比例maximum-scale ? 允许用户缩放到的最大比例user-scalable ? 用户是否可以手动缩放

Copy after login

(3). Try a variety of layout experiences without much practice. In short, the space is limited and the ideas are unlimited.

-webkit-overflow-scrolling:touch 来实现滚动，当然对于不支持的，也可以使用“iscroll”来兼容，而iscroll同样也需要一个固定高度的容器来包裹可滚动的内容。

Copy after login

　Hahaha, this article is over and there is no more to be continued. I hope to communicate more with you and make progress together. . . . . . Whoosh...(*^__^*)　　

Big Bear {{bb}} Mobile Development Journey (Season 1)_html/css_WEB-ITnose