Mobile development Those things

To tell you the truth, we developed the mobile end of the project, the entire team of people are the first time, the initial project for the choice of native app and web app also debated, and finally comprehensive consideration, we chose the web (we chose the H5) development. But from the characteristics of these two development models, from the date of their birth began the constant debate, which is good or bad, this article does not discuss, but simply listed under my development problems and the final solution.

1. Responsive Web Design

Speaking of this, mobile development faces the screen size that is called a rich, and the Android camp is enough to make people headache. The two common layouts we use on the PC side are fixed layouts and flexible layouts, which set a fixed-width display of the majority of the computer's normal display and a percentage. There are a lot of articles about these two discussions, interested in their own check, I would like to introduce today is to believe you have heard the "response layout", responsive layout means that the media inquiries, this in the CSS2 has appeared in the HTML5, CSS3 and added new vitality.

Responsive web design is not a new technology, it's just a combination of existing development techniques (resilient layouts, resilient images, media queries, etc.), and a name that sounds like a cow x--responsive web design. Like Ajax of the year, the existing technology to regroup to play a new role.

(1). Media inquiries. Media inquiries are not new technologies, as follows:

The media query is used to specify the device type for the style sheet through the media properties of the label, and of course the CSS3 times are richer.

Did you find the difference? Right, not just for the equipment to fit, and added a condition, that is, when the device is placed vertically to match, we look at one more.

You will find that we have extended the condition that the Style.css style file is loaded when the device screen is wider than 960px. What are some of the features that we can detect? Listed below for your reference (refer to http://www.w3.org/html/ig/zh/wiki/CSS3 media query):
width viewport width
height viewport height
device-width The width of the device screen
device-height the height of the device screen
orientation detect whether the screen is on a horizontal or vertical screen
aspect-ratio a wide-high ratio based on the viewport
device-aspect-ratio The number of digits of the
color color based on the height of the device screen, such as whether the min-color:32 matching device has 32-bit or more colors
color-index Color Index table for the device
monochrome Detects the number of bits per pixel used in the monochromatic vibration buffer. is a non-negative number, such as the Monochrome:3
resolution detects the resolution of the screen or printer, such as MIN-RESOLUTION:300DPI (described later in the DPI), or a metric per centimeter of pixel. such as MIN-RESOLUTION:120DPCM
scan scan mode, the value is progressive (progressive scan), interlace (interlaced)
grid detection output device is a grid device or a bitmap device

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

But now that's not what we're talking about, it's this:
Browsers in most iOS and Android devices support the viewport META element overrides the default canvas zoom setting. Insert the META tag in the label, set the appropriate property, as the code above, name= "viewport" content width=device-width means that the browser page width is equal to the device width (you can set a height or specify a specific value). Initial-scale=1 means that the page does not scale, mininum-scale=1 and maximum-scale=1 allow the user to minimize to the original size and expand to the original size (the actual is not to zoom ^ ^), user-scaleable=no Indicates that scaling is prohibited, target-densitydpi = high-dpi represents a screen with a high resolution, and can also be value Dpi_value | device-dpi| high-dpi | medium-dpi | LOW-DPI, the following four qualitative, 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 certain range of representation. Here we begin with a noun dpi that appears in the previous article, representing 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 the ultimate resolution of the human eye is reached, the Chowa takes a very high-end name--retina. So the current mobile phone resolution is how a distribution, iOS everyone knows, from the iphone4 era has been the retina screen, as for Android can look at the previous Google official published data:

From the above can be seen, high split screen and super split screen is already the mainstream, the specific scope of the appropriate to see their own projects and positioning it.

With so much to say, one might wonder why these are not used in CSS? Don't worry, take it slow, now to 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/*

/* Super high resolution screen (legendary Retina screen) * *

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

Loads the style in curly braces for a viewport width of not more 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 you write a style for each size, I think the designer and the front side do not have to do anything else, because the development cost is too large, and unnecessary, We only need to focus on the vast majority of equipment combined with media inquiries and flexible layout to adjust, reduce development costs.

2.CSS3 New Properties

Now the mobile end of both camps iOS and Android are based on the WebKit kernel, and the WebKit kernel of CSS3 in front of the support, where we can throw away the same IE family, enjoy the colorful CSS3 world!

CSS3 brings us such as: Text Shadow (Text-shadow), Box Shadow (Box-shadow), rounded (Border-radius), Background gradient (Background:linear-gradient (#000, #fff)), 2d transform (transitions), animation (animation), and so familiar with common properties, 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 to which other browsers support these attributes, Interested in their own research, each of these attributes have their own use of the scene, see how flexible use. Today I am not all listed, just briefly introduced a few.

(1), the introduction of the first is display:-webkit-box, we know that the elements are roughly divided into inline elements, block elements and between the two elements, of course, and inline-table, Table-cell and other gods horse, then display:- Webkit-box How to use, what to take a scenario, for the following picture, the parent element is divided by 1, 2, 3, and 2 and 1 intervals between 10px, what would you do?

At this time we can try the new Display:-webkit-box, in addition to the following properties to use together,
-webkit-box-orient the direction of the child elements horizontal | Vertical | Inline-axis | Block-axis | Inherit, where the default value is Inline-axis, that is, the horizontal arrangement
-webkit-box-flex the proportions of the child elements, only one coefficient
-webkit-box-direction child element Order Normal | Reverse | Inherit, where the default value is normal
-webkit-box-flex-group fluid coefficients in groups
-webkit-box-ordinal-group Arrange direction in groups of child elements
-webkit-box-lines whether the child element wraps, similar to the role of Word-wrap and Word-break
-webkit-box-align of the child elements in vertical direction
How to-webkit-box-pack the child element horizontally
These are used in conjunction with the properties we all default to

CSS:

HTML:

How to understand the above code, Father has a land, want to give a few brothers, except eldest brother and second between the split line accounted for that piece, the remaining part of the score by Li's brother number and the total number of Box-flex determined, now altogether three brothers, each brother's Box-flex is 1, so on the total score = 1 *1+1*1+1*1=3.
If the code changes slightly

So now the second Box-flex is 2, the total score is 1*1+1*2+1*1=4, which eldest brother old each accounted for one, second accounted for two, the results show as follows:

(2),-webkit-text-size-adjust:none; When I did the project, I found a problem, 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 invalid, It was later known that Text-size-adjust (Https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust) was at mischief. Browser default will be based on the current screen and content to adjust, in the WebKit kernel browser only need-webkit-text-size-adjust:none to prohibit automatic adjustment, as to whether the global live local use to see their own project needs.

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

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

(3), the word level unit.

We often have PX, PT, percent, EM and so on, very ashamed, I recently learned that there is REM, but also a pretty good friend. Several units in front of us are more familiar with, do not know if I have the same small white to know the REM, we will introduce this new friend, it is with CSS3 came to this world.

The problem we had before using EM and percentages was computation, and when the nesting level was too long it was very difficult to control, and the PX was fixed to death, and now we use REM without worrying about the problem, because the REM reference object has only the root node. We only need to set the size of the root node, all the child nodes need to refer to it to design can be, the following is PX, EM, percent and PT comparison

Depending on the chart above (the Red section is the default, of course, different browser rendering defaults are not the same, specific needs to be measured, you can see, we simply set the HTML root element font size 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 rather than the parent element, when the need to change, just change the size of the HTML and other elements will be changed, very convenient.

3, HTML5 new label.

Add a lot of tags in the HTML5, enhance the semantic of HTML tags, such as, and so on, these tags have their own great significance, no longer just span and Div, although HTML4 also has 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 is new, the most representative of the form form, and this article is to introduce the form.

In addition to Type=text, the other is new, if the browser supports these properties, will automatically invoke the corresponding components, such as in mobile devices Type=number/email/text, the browser will call the different suites of the keyboard, so as to speed up the user's input, the experience is also better , as follows

In the case of type=range, such a component appears to select a range

If it is type=color, the color picker appears

If it is type=date, the date picker appears

If it is type=search, then in the input when a button to clear the buttons, click on the text to clear all

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

Of course, the new not only placeholder, and for example, can turn off the default case of autocapitalize= "off", interested in child shoes can be studied.

4, Selector

The selectors are roughly divided into element selectors, relationship selectors, attribute selectors, pseudo class selectors, pseudo object selectors, and at the PC end, 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 ie some browser reasons, a lot of easy to use the selector can not be widely used, such as IE6 only support a label pseudo-class selector, but on the mobile side, we do not care about these, most of the selectors are already available, as the previous text 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 that can be used flexibly to reduce the number 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:. ...}, and/or... first-line/e::first-line{...}, e:before/e::before{...}, e:after/e::after{...}, e::selection{...}, and so on ...} ...} Wait, this is not to elaborate.

5. Some small suggestions

(1) How to prohibit users from rotating equipment
This is actually trying to tell you that you can't do it in the browser because it prevents the developer from blocking the browser's Orientationchange events.

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

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

(3) box Border overflow
When we specify a block-level element and have a border defined for it, the width is set to 100%. By following the box model, you will see that the left and right border of the element will overflow, causing the horizontal scroll bar to appear, at which point we can add-webkit-box-sizing:border-box to specify the size of the box, including the width of the border.

(4), iOS digital color style over 9 digits after the runaway
The problem I don't know how to describe, is in iOS, when the number is more than 9 digits, the browser will give this number by default color, no matter what color you set is invalid.

(5), iOS can prevent users from opening the page in a new window
In project development, sometimes we need a link on the current page to open, so we need to prevent users from opening the page in a new window, we can use the "a" target= "_self" specified on the current page, but in iOS long after the link for a while, the system will pop up a dialog box, Users can open the page in a new window by clicking on "Open in new page" so that the target attribute we specify fails, but can be prevented by specifying the current element's-webkit-touch-callout property to none.

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

This article back and forth the long-winded said a lot, mostly is a pen with no detail, because each small point of research can write a blog, I do not swim, interested in the children's shoes on a thin study. Because the writing is not good and the scope of knowledge is limited, if there are errors please correct me, thank you!

(Weibo UDC original blog, reprint please specify the source