This article from: http://www.apkbus.com/android-16708-1-1.html
In general, it is to develop web pages for mobile devices. With the advent of the 3G era and the continuous advancement of browser technology, more and more people begin to leave the PC and use mobile devices (mobile phones, PSP, tablets) in their hands to access the Internet. If you are a person who pays attention to the details of your life, please take a closer look at what people are doing when you take the subway or bus? Is it true that everyone is listening to music, reading news, and chatting with a cell phone?
As a developer, how can we develop webpages that are more suitable for mobile devices? How can you make your site more accessible to most mobile devices? This series Article We will answer your questions one by one. Today's most popular mobile phone systems include Android, iPhone, Symbian, BlackBerry, and Web OS. These System browsers are based on the core of WebKit, and WebKit claims to be a full-featured mobile browser that supports HTML + CSS + Javascript. However, due to the differences between mobile devices and PCs, as a result, the web pages we develop will always be unsatisfactory on mobile devices. The first concept we need to contact is "viewport", which can be translated into Chinese as "view area". We all know that the screen section of a mobile device is much smaller than that of a PC, the WebKit browser maps a large "virtual" window to the screen of a mobile device. The default virtual window is 980 pixels wide (currently the standard width of most websites ), then scale according to a certain ratio (OR. That is to say, when we load a common webpage, WebKit will first load the webpage according to the browser standard of 980 pixels, and then reduce it to the width of 490 pixels. Note that this scale-out is a global scale-out, that is, all elements on the page are reduced. As shown in, the effect of a Common article page on mobile devices is as follows:
The page is loaded in 980 pixels and is not deformed. However, after proportional scaling, nothing can be seen with the naked eye. Fortunately, mobile devices generally support screen amplification. After amplification, we can see the content on the screen. How about viewport? So can we manually change the WebKit's view area? Of course, you can add the following area between Code :
- <Meta name = "viewport" content = "width = 500"/>
Let's take a look at the effect of the Force view area size command on the page? As shown in: How is it? Is it much better? Is there any better way? For example, we automatically detect the screen size of a mobile device and make the content adaptive. The Code is as follows:
- <Meta name = "viewport" content = "width = device-width"/>
Device-width automatically detects the screen width of a mobile device. How is it? Are you satisfied? All page content is adaptive to the mobile device screen. Next we will take a list page as an example to explain how to make the pages we developed perfectly visible on mobile devices. The original page is shown as follows: The Code is as follows:
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
List
Next, we will introduce a simple concept. As you know, the web pages we develop must be displayed on different devices, we need to use different Style Sheets (CSS) on different devices to make our page display more perfect. For example, if the page we developed needs to use different CSS on the mobile phone and tablet, the Code is as follows:
<LINK rel = "stylesheet" type = "text/CSS" href = "android.css"
Media = "only screen and (max-width: 480px)"/>
<LINK rel = "stylesheet" type = "text/CSS" href = "tab.css"
Media = "screen and (min-width: 481px)"/>
Hosts file. Let's take a look at the android.css file:
@ Charset "UTF-8 ";
Body {
Background-color: # DDD;
Color: #222;
Font-family: Helvetica;
Font-size: 14px;
Margin: 0;
Padding: 0;
}
# Header H1 {
Margin: 0;
Padding: 0;
}
# Header H1 {
Background-color: # CCC;
Border-bottom: 1px solid #666;
Color: #222;
Display: block;
Font-size: 20px;
Font-weight: bold;
Padding: 10px 0;
Text-align: center;
Text-Decoration: none;
<! -Add one pixel white shadow to the title and a gradient background.->
Text-Shadow: 0px 1px 1px # FFF;
Background-image:-WebKit-gradient (linear, Left top, left bottom, from (# CCC ),
To (#999 ));
}
# Container {
Padding: 10px 10px;
}
# Nav ul {
List-style: none;
Margin: 8px;
Padding: 0;
}
# Nav ul Li {
Background-color: # ffffff;
Border: 1px solid #999999;
Color: #222222;
Display: block;
Font-size: 17px;
Font-weight: bold;
Margin-bottom:-1px;
Padding: 12px 10px;
Text-Decoration: none;
}
/*
* Add the rounded corner effect to the first item in the list.
*/
# Nav ul Li: First-Child {
-WebKit-border-top-left-radius: 6px;
-WebKit-border-top-right-radius: 6px;
}
/*
* Add the rounded corner effect to the last item in the list.
*/
# Nav ul Li: Last-Child {
-WebKit-border-bottom-left-radius: 6px;
-WebKit-border-bottom-right-radius: 6px;
}
# Footer {
Display: block;
Padding: 10px 10px;
}
Like a normal page, we only added a background gradient and shadow effect for mobile devices, and added a rounded corner to the first item in the list and the last item in the list. The final effect is shown in: How is it? Is it pretty on the phone? For the CSS used by flat computers, we only changed the background color. The final effect of using tab.css on flat computers is as follows: Finally, let's complete our list page and use jquery's ajax to load the list details. The final result is to click any item in the list, as shown below: Add the return button style in our CSS file. The Code is as follows:
-
- # Header Div. leftbutton {
-
-
- Font-weight: bold;
-
-
- Text-align: center;
-
-
- Line-Height: 28px;
-
-
- Color: white;
-
-
- Text-Shadow: 0px-1px 1px rgba (0.6, 0 );
-
-
- Position: absolute;
-
-
- Top: 7px;
-
-
- Left: 6px;
-
-
- Max-width: 50px;
-
- White-space: nowrap;
-
-
- Overflow: hidden;
-
-
- Text-overflow: ellipsis;
-
-
- Border-width: 0 8px 0 14px;
-
-
- -WebKit-border-image: URL (images/back_button.png) 0 8 0 14;
-
-
- -WebKit-tap-Highlight-color: rgba (0, 0, 0 );
-
-
- }
-
-
-
-
- # Header Div. leftbutton. clicked {
-
-
- -WebKit-border-image: URL (images/back_button_clicked.png) 0 8 0 14;
-
-
- }
Copy codeAdd the Android. js file. The Code is as follows:
-
- VaR hist = [];
-
- $ (Document). Ready (function (){
-
-
- $ ('# Nav A'). Click (function (e ){
-
-
- E. preventdefault ();
-
-
- Loadpage(e.tar get. href );
-
-
- });
-
-
- Loadpage ("null ");
-
-
- });
-
-
-
-
- Function loadpage (URL ){
-
-
- $ ('# Iner'). Load (URL, function (result ){
-
- If (url = 'null '){
-
-
- $ ('# Nav'). Show ();
-
-
- } Else {
-
-
- $ ('# Nav'). Hide ();
-
-
- }
-
-
- VaR Title = require ('h2'0000.html () | '<A> mobile Web list demonstration </a> ';
-
-
- Certificate ('h1'0000.html (title );
-
- $('H2 '). Remove ();
-
-
- $ ('. Leftbutton'). Remove ();
-
-
- Hist. unshift ({'url': URL, 'title': Title });
-
-
- If (Hist. length> 1 ){
-
-
- $ ('# Head'). append (' <Div class = "leftbutton"> return </div> ');
-
-
- $ ('# Header. leftbutton'). Click (function (e ){
-
-
- Values (e.tar get). addclass ('clicked ');
-
- VaR thispage = Hist. Shift ();
-
-
- VaR previouspage = Hist. Shift ();
-
-
- Loadpage (previouspage. url );
-
-
- });
-
-
- };
-
-
- });
-
-
- }
Copy codeThe complete code on the list page is as follows:
-
- <HTML>
-
-
- <Head>
-
-
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
-
- <Meta name = "viewport" content = "user-scalable = No, width = device-width"/>
-
-
- <LINK rel = "stylesheet" type = "text/CSS" href = "assets/CSS/android.css"
-
-
- Media = "only screen and (max-width: 480px)"/>
-
-
- <LINK rel = "stylesheet" type = "text/CSS" href = "assets/CSS/tab.css"
-
-
- Media = "screen and (min-width: 481px)"/>
-
-
- <LINK rel = "apple-touch-icon-precomposed" href = "homeicon.png"/>
-
-
- <SCRIPT type = "text/JavaScript" src = "assets/JS/jquery. js"> </SCRIPT>
-
-
- <SCRIPT type = "text/JavaScript" src = "assets/JS/Android. js"> </SCRIPT>
-
- <Title> List </title>
-
-
- </Head>
-
-
- <Body>
-
-
- <Div id = "Header">
-
-
- <H1> <a href = "#"> mobile Web list demonstration </a>
-
-
- </Div>
-
-
- <Div id = "nav">
-
-
- <Ul id = "tasklist">
-
-
- <Li> <a href = "pre.html"> prepare meeting materials </a> </LI>
-
-
- <Li> <a href = "webmeeting.html"> participate in technical seminars on mobile Web development </a> </LI>
-
- <Li> <a href = "meetingjack.html"> meeting with Jack </a> </LI>
-
-
- <Li> <a href = "designdoc.html"> organize XX system design documents </a> </LI>
-
-
- </Ul>
-
-
- </Div>
-
-
- <Div id = "Container"> </div>
-
- <Div id = "footer"> <span> Copyright 2010-2015 ideasandroid.
All rights reserved. </span> </div>
</Body>
</Html>
In the above Code, we added a line of gray background code:
- <LINK rel = "apple-touch-icon-precomposed" href = "homeicon.png"/>
This code is used to add a web shortcut to the home page on the Android mobile phone.
Now, let's summarize several key things for Android mobile Web development:
1. viewport (view area ).
2. CSS file adaptation.
3. Added gradient, shadow, and rounded corners for mobile devices.
4. shortcut icon: Apple-touch-icon-precomposed.
There are still a lot of things involved in androidweb development. This article is just a brief introduction to a little entry-level knowledge. More content also needs to be practiced and learned by yourself. I hope this article will help you.