Geek asks and answers

1st mobile site

I am starting the first mobile site. Its simple and should be simple enough, but I have a few questions:

Please answer all or all that you can!

1) How to tell the site to serve the styles_mobile.css sheet for mobile traffic? Is the most used code used for this?

2) I have an index page and I create a new mobile: "/index_mobile.htm" is "wrong". Should a mobile page be its own entity (e.g. / mobile.htm) or based on an existing index page? How to redirect it? How to create the address "m.mywebsiteaddress.com"

3) I am currently doing editing on my laptop, and then to see how they look, I need to download them to my ISP to see the effects of my changes on my iphone - how can I do it directly from my Mac?

4) Is there a standard structure for html elements? For instance. standard document has html, head and body elements. HTML5 now has header, navigator and footer elements - are there any mobile specifics that I should be aware of?

That's all for now, but I can see how I am adding to this over the next few days. Any pointers or special recommendations are welcome.

+3
source share
4 answers

, . html, css, js. , , m.site.com www.site.com/m/. - .

:

+2

1) , "styles_mobile.css" ? ?

, -:

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">

2) , : "/index_mobile.htm" - "". (,/mobile.htm) ? ? "m.mywebsiteaddress.com"

, (index.html) , . http://www.html5rocks.com/en/ , . , , , . (.. Index.html), ( mobile.html).

3) , , , , -, iphone - Mac?

Apache Server Mac, ( 80 8080 IIRC), , . URL (http://xx.xxx.xx.xx) - .

4) html? . html, . HTML5 , - - , ?

, HTML-, . , , HTML5 ( ), "" - XHTML HTML4, viewport .

, , , -.

http://www.html5rocks.com/en/mobile/mobifying/

+2

, . .

  • CSS - / .
  • . , - -.
  • , -. (max-device-width: 480px) (max-width) / . , OS X, iOS, Xcode, ( iPads !).
  • . - .

, , . HTTP-. - .

+1

To use media queries inside your “regular” style sheet (for example, a desktop style sheet), follow these steps:

/* desktop */
body { background: #FFFFFF; }
header { width: 100%; }

/* queries for devices with a max viewing area of 480px */
@media only screen and (max-width: 480px) {
  body { background: #444444; }
}

The above CSS can be tested in a desktop browser. For example, put the styles above in the style tag and view the page in a browser with a width of more than 480 pixels (a maximized window will be executed). Then resize the window until you see a background change in dark color (what happens when the window width is less than 480 pixels).

0
source

More articles:


All Articles