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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:49 AM

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>

🎜>　

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 }

　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新增）。

(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 ? 用户是否可以手动缩放

(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同样也需要一个固定高度的容器来包裹可滚动的内容。

　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...(*^__^*)　　

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles