In Appcan development, the first thing to do is the page layout, and then fill in the data on the page, and add the interactive elements to form a complete application.
Because appcan is developed using HTML5 + CSS3 + JavaScript technology, it is basically no different from general web development. It may be better explained to understand webapp development.
In iOS and Android systems, the webkit kernel has been built in, and appcan uses webkit to run the pages we have written. In other words, appcan can be seen as a strengthened webkit kernel, strong in its ability to use JS to control certain features of mobile phones, such as making phone calls, sending text messages, and locating, which cannot be achieved by common webapps.
HTML page layoutThe following describes some issues that need attention in appcan to avoid the troubles caused by these problems.
Mobile device screens are usually relatively small. When a mobile browser browses a webpage directly, the webpage is scaled. However, we developed a native application that does not allow users to scale or adjust the webpage area. How can this problem be solved?
We can create a new page template named index.html in appcanto view its header code:
<!DOCTYPE html>The Code shows that the page uses the standard HTML5 header declaration. <Title> the tag can be empty or empty. The next step is to declare the page encoding. We recommend that you use UTF8 encoding, because ajax and json encoding in JS can only be UTF8, so it is best to use UTF8 to avoid garbled code and program exceptions.
Now, let's go to the key part. What is the meta attribute of viewport?
I will explain the content separately.
Target-densitydpi = device-dpi, which specifies the pixel density DPI of the screen. device-dpi is the original DPI value of the device without any scaling.
Width = device-width, which specifies the screen width and the screen width of the device-width device.
Initial-scale = 1. The initial scaling ratio is set to 1, indicating that no scaling is performed and the original size is displayed.
User-scalable = no. Whether the user can manually scale the page. Setting it to no is not allowed.
Minimum-scale = 1.0, Min scaling ratio, set to 1, Min scaling to only 1 times.
Maximum-scale = 1.0, the maximum scaling ratio, set to 1, the maximum scaling can only be doubled, with the previous item, ensure that the page is not scaled.
In fact, when the user-scalable is no, the last two items will not work, because there will be no scaling problem, and the figure is placed in a safe place.
In this way, the width of the webpage is the width of the area displayed on the screen and will not change on any device, this is also a big difference from general web development.
Ui-media.css this file is the official default generated CSS file, the approximate purpose of the file is to set the appropriate font size in different resolution screen, from 9px to 32px, iphone 16px, ipad1 is 20px, and android 800*480 is 24px. It is precisely because of this file that the fonts on screens of different sizes do not seem to have a large imbalance problem. For example, the fonts on the ipad are not displayed too small and the iphone is not too large. More importantly, the size of the text will directly affect the setting of CSS length units in the future!
Pay attention to CSS formatting using em Unit
Similar to the ui-base.css file, it is a CSS style file in the entire project. All styles used are in this file. The Compiling is consistent with that in common web pages and supports the CSS3 attribute, rational use of the CSS3 attribute will improve performance and efficiency.
CSS compatibility issues have always existed on mobile phones and computers. appcan is no exception. Although CSS 3 is supported, it varies with platforms and needs to be used as appropriate.
For appcan, the biggest headache is the display effect of different resolutions. The same layout scheme is used for screens of different sizes in the instance, which is also used by most applications. So how can we make the display results of these devices basically consistent?
Generally, ui-media.css increases the font of devices with larger screens, and vice versa. Is there a way to make the layout adaptive? In CSS, The em unit is not an exact unit, but a relative unit. Who is the relative unit? The opposite is the font size, which is the reason why the font size directly affects the CSS layout.
Em inherits the font size of the parent element. It is important to remember that it does not affect development if the sizes are inconsistent during use.
The document has a default text size, and each element has a font size. Therefore, when using em, you must calmly and clearly determine the specific value of the text size at the current position.
The em unit is affected by the default font size of the page, and the inner element is affected by the font size of the outer element.
Why use em instead of px? Em is the relative size, px is the fixed size, em will show different sizes in different resolutions, and px is always the same size!
You can refer to ui-base.css and the official ui css files. A large number of CSS files use em as the Unit, while the pixel unit is almost zero.
In project development, we recommend that you use em as a unit and avoid using px as much as possible. This ensures that the display effect on different devices is basically the same.
Zoom in the background imageAfter finishing the font, let's talk about another element that may need to be scaled-the background image.
The image of a common img label can be scaled by controlling the length and width, but the background image cannot. When the container size changes, the background image is still the original size.
There is also an attribute in CSS3 that can help us control the scaling of background images by container size --- webkit-background-size: 100% 100%;
As for how to use this attribute, I will not introduce it much. You can Google it yourself. You only need to set this attribute on the element that requires the zoom of the background image.
In our instance, this attribute is added to almost all background images. You can see how the buttons at the bottom of the instance use this attribute, the button size scales according to the screen, and the background of the button is always filled with the overall button. This property is very practical during development!
After using the em and-webkit-background-size attributes, you will find how happy the development project is in appcan.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
