dizajn webových stránok pre rôzne zariadenia? - css, dizajn, mobilné, mobilné webové stránky

Čo mám robiť, aby moja webová stránka správne zapadalapre rôzne obrazovky .. napríklad 32 "24" 17 "monitory, ako aj pre mobilné zariadenia (netbooky atď.) s 9" - 11 "obrazovkami a mobilnými telefónmi, ktoré majú kdekoľvek medzi 2,5" - 5 "obrazovkou?

Ako by som mal navrhnúť rozloženie mojej domovskej stránky / šablóny atď. Čo by som mal mať na pamäti ... čo by som potreboval pre tento css, javascript alebo serverové jazyky na čítanie typu zariadenia?

Akékoľvek iné odporúčania, ktoré by ste chceli navrhnúť, aby sa stránka stala prístupnou a použiteľnou pre rôzne typy zariadení.

Vďaka vopred za všetku vašu pomoc.

odpovede:

Nič osobné sandeep, ale väčšina z odpovedí na otázky mobilného web design tu sú zamerané len na iPhone alebo Android. Mobilný internet nie je len iPhone alebo Android. Existuje mnoho zariadení (v skutočnosti viac ako iPhone a Android dohromady), ktoré nerozumejú vyhľadávacím portom alebo mediálnym dotazom a sú aktívne na mobilnom internete.

Ak chcete byť dostupný čo najviac zariadení.

• dizajn stránky s nízkou hmotnosťou
• nepoužívajte horizontálne rozloženia. napr. 2-3 boxy vedľa seba. urobte všetko vertikálne, aby sa zmestili na malé obrazovky
• nepoužívajte ťažké java-skript, vyhnúť sa čo najviac
• nepoužívajte príliš veľa grafiky
• vyhnúť sa používaniu min-width a / alebo max-witdh vo vašom css

nie je potrebné písať js, môžete to urobiť jednoduchos CSS. V meta definujeme, že webová stránka sa prispôsobuje podľa výhľadu zariadenia a tiež ak chcete zmeniť dizajn, potom napíšte inú css pre veci, ktoré chcete zmeniť napríklad:

pre mobilné zariadenia

<meta name="viewport" content = "user-scalable=no, width=device-width" />"
<link rel="stylesheet" media="all" href="stylesheet/iphone.css" type="text/css" />;

pre zmenu veľkosti okna

 <link rel="stylesheet" media="all (min-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;

<link rel="stylesheet" media="all (max-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;

Pre viac informácií musíte vidieť tieto odkazy http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes , http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm