уеб дизайн за различни устройства? - css, дизайн, мобилен, мобилен уеб сайт

Какво трябва да направя, за да може моят сайт да се побере правилноза различни екрани .. например 32 "24" 17 "монитора, както и за мобилни устройства (нетбуци и т.н.) с 9" - 11 "екрани и мобилни телефони, които имат някъде между 2.5" - 5 "екран?

Как трябва да проектирате оформлението на моята начална страница / шаблон и т.н. Какво трябва да имам в предвид ... какво бих изисквал за този css, javascript или сървърни езици, за да прочетете вида на устройството?

Всички други препоръки, които искате да предложите, да направят сайта достъпен и използваем за различни типове устройства.

Благодаря предварително за цялата ви помощ.

Отговори:

Нищо лично, но повечето от отговорите на въпросите за уеб дизайна за мобилни устройства тук са насочени само към iPhone или Android. Мобилният интернет не е само iPhone или Android. Има много устройства (всъщност повече от iPhone и Android), които не разбират порта за прегледи или медийни заявки и са активни в мобилния интернет

Ако искате да сте достъпни колкото е възможно повече устройства.

• проектирайте леки страници
• не използвайте хоризонтални оформления. като 2-3 кутии един до друг. направете всичко вертикално, за да се поберат на малки екрани
• не използвайте тежкия java-скрипт, избягвайте го колкото е възможно повече
• не използвайте твърде много графики
• избягвайте да използвате min-width и / или max-witdh в css

няма нужда да пишете js можете да го направите простос CSS. В meta ние определяме, че уебсайтът се настройва според визуалния прозорец на устройството, а също и ако искате да промените дизайна, тогава напишете различни css за нещата, които искате да промените например

за мобилно устройство

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

за промяна на размера на прозореца

 <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" />;

За повече информация трябва да видите тези връзки 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