Shallow talk about HTML5 mobile web development

To tell the truth, we developed the mobile project, the whole project team is the first time, the initial project is to choose Native app and web app also debated, finally comprehensive consideration, we chose the web (we chose H5) development. However, from the characteristics of these two development models, from the date of their birth began a constant debate, which is good or bad, this article does not discuss, just a simple list of my development encountered problems and the ultimate solution.

1. Responsive Web Design

Speaking of which, mobile development faces the screen size that is called a rich, in which the Android camp is enough to make people headache. The two types of layouts we commonly use on the PC are fixed layouts and flexible layouts, which set a fixed-width center display for most computers to display normally, while the latter uses percentages. About the two discussion of the article many, interested in their own review, I would like to introduce today is to believe you have heard the "responsive layout", responsive layout means the media query, this in CSS2 has already appeared with HTML5, CSS3 of the arrival of the new vitality added.

Responsive web design is not new, but integrates existing development techniques (elastic layouts, elastic images, media queries, and so on) and kills the name that sounds like a bull X-responsive web design. Like the Ajax of the year, the existing technology is re-assembled to play a new role.

(1). Inquiry into media query. Media queries are not emerging technologies, as follows:

In this case, media queries are used, and the media properties of the tags specify the device type for the style sheet, which is of course more abundant in the CSS3 era.

Have they found the difference? Yes, not only for equipment adaptation, but also added a condition, that is, when the equipment is placed in the vertical when the matching, we look at one.

You will find that we have extended another condition, that is, when the device screen is wider than 960px, the style.css style file will be loaded. What are some of the features that we can detect? Some of the following columns are available for your reference (refer to Http://www.w3.org/html/ig/zh/wiki/CSS3 media queries):
-width viewport widths
-height viewport height
-device-width Width of the device screen
-height of device-height device screen
-orientation detection screen in horizontal or vertical screen
-aspect-ratio width-to-height ratio based on viewport
-Device-aspect-ratio Based on the aspect ratio of the device screen
-the number of bits of color, such as whether the min-color:32 match device has 32-bit or more colors
-colors in the COLOR-INDEX device's Color index table
-Monochrome Detects the number of bits per pixel used in a monochrome oscillator buffer. For non-negative numbers, such as Monochrome:3
-resolution to detect the resolution of the screen or printer, such as MIN-RESOLUTION:300DPI (described later in DPI), or a measure of pixels per centimeter. such as MIN-RESOLUTION:120DPCM
-scan scan mode, value is progressive (progressive scan), interlace (interlaced)
-grid detects whether the output device is a grid device or a bitmap device

When you create a media query, the above features (scan and grid not) can be combined with the Min and Max prefixes to create a range of media queries. In addition to the link tag can be media query, is there anything else, the answer is yes. Meta tags in html, which we used to be this

But that's not what we're talking about now, but this:
The viewport meta element overrides the default canvas zoom settings on most iOS and Android device browsers. Insert the META tag in the tag, set the corresponding properties, such as the code, name= "viewport" content width=device-width means that the browser page width is equal to the device width (the same can be set height, or specify a specific value), Initial-scale=1 indicates that the page does not scale to hold, mininum-scale=1 and maximum-scale=1 represent allow the user to minimize to the original size and expand to the original size (actually is not let scaling ^ ^), user-scaleable=no Means no scaling, target-densitydpi = high-dpi for high resolution screens, and a value of Dpi_value | device-dpi| high-dpi | medium-dpi | LOW-DPI, the following four qualitative, the first quantitative, that is, Dpi_value is the DPI value, DEVICE-DPI is using the device's original DPI as the target DP, does not occur the default scaling, and the following three refers to the DPI value in a range of representations. Here we first introduce a noun dpi, which represents the number of pixels per inch (pixel), the higher the value, which means that the display can display the image at a higher density. When reaching the limit resolution of the human eye, the amid master gave it a very high-end name--retina. So the current market of mobile phone resolution is how a distribution, iOS everyone knows, from the iphone4 era is already a Retina screen, as for Android can see the previous Google official data:

From the above can be seen, high-split screen and ultra-split screen is already the mainstream, specific adaptation range or look at their respective projects and positioning it.

Speaking so much, one might wonder why these are not used in CSS? Don't worry, slow down, now introduce how to use in the style, according to the above screen resolution of four kinds of division, we can see the basic can discard ldpi.
/* Medium Resolution screen */

/* High Resolution screen */

/* Ultra high resolution screen (the legendary Retina screen) */

The above is in the use of CSS, we need to include the CSS code in curly braces can be used, is not very convenient appearance%>_<%. Of course we can also use some of the features previously provided, as follows:

Loads the style in curly braces for cases where the viewport width is not greater than 768 pixels.
Although we can divide the resolution of the device into these categories, but the size of the screen is too much, if a style for each size, I think the designer and the front end do not have to do anything else, because the development cost is too large, and not necessary, We only need to adapt to the vast majority of devices combined with media queries and flexible layouts to reduce development costs.

2.CSS3 New Properties

Now the mobile side of both the camp iOS and Android are based on the WebKit kernel, and the WebKit kernel to CSS3 support go in front, here we can throw away the same as the internet of IE family, enjoy the colorful CSS3 world!

CSS3 brings us such as: Text Shadow (Text-shadow), Box Shadow (Box-shadow), fillet (Border-radius), Background gradient (Background:linear-gradient (#000, #fff)), Transition, animation (animation) and other common familiar attributes, but also like-webkit-mask,-webkit-text-stroke,-webkit-nbsp-mode,- Webkit-tap-highlight-color,-webkit-box-reflect,-webkit-marquee,-webkit-box, and other WebKit kernel private properties, as to the extent of other browser support for these properties, Interested can study their own research, each of the above properties have their own use of the scene, see how to use the flexible. Today I'm not all listed, just a few simple introductions.

(1), the introduction of the first is display:-webkit-box, we know that the elements are broadly divided into inline elements, block elements and elements in between the two, of course, there are inline-table, Table-cell and other gods horse, then display:- Webkit-box How to use it, what is the application scenario, for the situation shown, the parent element is divided by 1, 2, 3, and between 2 and 1 interval 10px, what do you do?

At this time we can try the new Display:-webkit-box, in addition to the following properties with the use of
-webkit-box-orient Sub-element arrangement Direction Horizontal | Vertical | Inline-axis | Block-axis | Inherit, where the default value is Inline-axis, which is the horizontal arrangement
-webkit-box-flex the ratio between sub-elements, only as a factor
-webkit-box-direction Sub-element order normal | Reverse | Inherit, where the default value is normal
-webkit-box-flex-group fluid coefficients in group units
-webkit-box-ordinal-group the direction of the child elements in group units
-webkit-box-lines whether the child element wraps, similar to the role of Word-wrap and Word-break
-webkit-box-align the direction of the child element vertically
-webkit-box-pack the way the child elements are horizontally oriented
The properties that these mates use are all by default

Css:

Html:

How to understand the above code, the father has a piece of land, to be divided into brothers, to remove the division between the eldest brother and the second part of the piece, the remaining portion of the score by the number of Li Brothers and Box-flex of the total determination, now altogether three brothers, each brother's Box-flex are 1, so on the total number = 1 *1+1*1+1*1=3.
If the code changes slightly

Then now the second Box-flex is 2, the total score is 1*1+1*2+1*1=4, of which the eldest brother old three each, the second accounted for two copies, the results are as follows:

(2),-webkit-text-size-adjust:none; When I was doing the project, I found a problem, that is, when the screen of the vertical screen when the display effect is good, but when the horizontal screen, the font will become larger, no matter how you set the font size is not valid, Later only to know is Text-size-adjust (https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust) in mischief. The browser defaults to the current screen and content to adjust, in the WebKit kernel browser only need to-webkit-text-size-adjust:none to disable automatic adjustment, as to whether the global live local use to see their own project needs.

As shown, it is obvious that when the phone from the vertical screen to the horizontal screen when the text of the theme area automatically become larger, regardless of the size of your own settings, when you set the-webkit-text-size-adjust:none after the effect of the horizontal screen is like this

In this way, the size of the font has our own settings, is controllable.

(3), Word-level units.

We used to have PX, PT, percent, EM and so on, very ashamed, I recently know that there is REM, but also a very good friend. A few units in front of everyone is more familiar with, do not know and I like small white just know rem, we introduce this new friend, it is with CSS3 came to this world.

The problem we encountered before with EM, percent, was calculation, and when the nesting level was too long it would be very difficult to control, and the PX was fixed dead, now we use REM without worrying about this problem, because REM reference object only the root node. We simply set the size of the root node, and all child nodes are designed with reference to it, and the following is the comparison of PX, EM, percent, and PT

According to the above chart (the red part is the default, of course, different browser rendering default value is not the same, the specific needs of you to test) can be seen, we just set the HTML root element font size is 75%, the corresponding PX value is 12, so we can easily set the width of the page and font size, Of course, the unit is REM, so that the reference object will always be HTML instead of the parent element, when the need to change, just change the size of the HTML other elements will change accordingly, very convenient.

3, HTML5 new tags.

Add a lot of tags in the HTML5, enhance the semantics of even HTML tags, such as, and so on, these tags each have their own significance, no longer just span and Div, although HTML4 also have a lot of semantic tags, but not as rich as HTML5. In addition to these new tags, there are some previous tags, but the category has been added, the most representative is the form form, and this article is to introduce the form.

In addition to Type=text, the others are new, if the browser supports these attributes, it will automatically invoke the corresponding components, such as type=number/email/text in mobile devices, the browser will invoke different layouts of the keyboard, so that the user's input, the experience is better As follows

If it is type=range, such a component will appear for the selection range

If it's type=color, the Color picker will appear.

If it is type=date, the date selector appears

If it is a type=search, then a button is cleared at the time of input, click the input text to clear all

In addition, in addition to the type of input new increment category, but also add some very useful properties, such as placeholder, we know that in input we will often default some copy, when the user input will be automatically cleared, HTML5 before we are implemented by JavaScript, But with the HTML5, we can easily achieve, only need to placeholder= "default copy" as follows

Of course, not only the new placeholder, but also for example, you can turn off the default case autocapitalize= "off", interested children shoes can study.

4. Selectors

Selectors are broadly divided into element selectors, relationship selectors, attribute selectors, pseudo-class selectors, pseudo-object selectors, and on the PC side, the most we use are element selectors, relationship selectors, and attribute selectors such as
div{...}, div.class{, ...}, div#id{...}, div span{...}, div[class= "ClassName"]{}, and so on.

However, due to some browsers for IE, many useful selectors can not be widely used, such as IE6 only support the A-tag pseudo-class selectors, but on the mobile side, we do not care about these, most of the selectors are already ready to use, as the previous article has been used

. Item_list Li:first-child{background: #f00}
. Item_list Li:nth-child (2) {margin-left:10px;background: #ff0;-webkit-box-flex:1;}
. Item_list Li:last-child{background: #c96}

There are many pseudo-class selectors and pseudo-object selectors, and flexible use can reduce a lot of unnecessary code. such as E:nth-child (n) {...}, E:nth-of-type (n) {...}, e:disabled{...}, e:empty{...}, e:first-letter/e::first-letter{.....}, E: For example, and the following. first-line/e::first-line{...}, e:before/e::before{...}, e:after/e::after{...}, e::selection{, ...}, and so on..} Wait, here is no detail.

5, some small suggestions

(1), how to prevent users from rotating equipment
This is actually to tell you not to do in the browser, because the developer is forbidden to block the browser Orientationchange event.

(2), disable the automatic identification number
In the development of the project, we often use some numbers or phone numbers, but do not want to automatically identify the system to allow users to dial directly, we only need to add between the tags, but there are special circumstances we need to be able to dial directly from users, such as

It doesn't matter, like this 010-52918772, the system will be recognized automatically, the user can choose to dial the click.

(3) box Border overflow
When we specify a block-level element and define a border for it, the width is set to 100%. According to the box model, one pixel of the left and right border of the element will overflow, causing the horizontal scroll bar to appear, when we can add-webkit-box-sizing:border-box to specify the size of the box to include the width of the border.

(4), iOS digital color style over 9 digits after runaway
This question I don't know how to describe, that is, in iOS, when the number is more than 9 digits, the browser will give the number by default a color, no matter what color you set is not valid.

(5), iOS can prevent users from opening the page in a new window
In the project development, sometimes we need a link to open in the current page, so that we need to prevent users from opening the page in a new window, we can use the A-label target= "_self" specified in the current page open, but after long press the link in iOS for a period of time, the system will pop up a dialog box, The user can open the page in a new window by tapping "Open in new page" so that the target property we specify is invalid, but you can disable iOS pop-up by specifying the-webkit-touch-callout property of the current element to none.

(6), CSS3 drawing and CSS3 animation
In the world of HTML5 and CSS3, a lot of pictures are superfluous, we can play our own imagination, let CSS3 replace unnecessary JavaScript, and also do CSS3 animation when it is best to extract the animation code out of a separate name.

Original address: http://sc.chinaz.com/info/130410113358.htm