ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » Оптимизация сайта под мобильные устройства. Создание PDA-версии сайта
Здравствуйте.
Подскажите кто может. Как сделать PDA-версию сайта или ещё как оптимизировать сайт так, чтобы люди с мобильных устройств могли её открывать, и при этом пользователи ПК и ноутбуков могли видеть оригинал сайта так как он есть сейчас? Ибо у нас появилась проблема затруднённого интерфейса через мобильные устройства.
Или как оптимизировать сайт, чтоб он проходил тест на кроссплатформенность?
Теги: мобильные устройства, PDA-версия,оптимизация
Герда
спасибо посмотрю сайт)
Герда, если честно, то я так и не пойму куда всё это вставлять, а слова в статье о том, что он(лектор) не будет подробно вдаваться в css озадачивают, пугают и запутывают одновременно. Я в css новичок.
например это
Я не собираюсь подробно описывать HTML код. Скажу, что на странице у меня есть "pagewrap" контейнер, который содержит "header", "content", "sidebar", и "footer".
я у себя этого не вижу и куда надо ставить это
<div id="pagewrap">
<header id="header">
<hgroup>
<h1 id="site-logo">Demo</h1>
<h2 id="site-description">Site Description</h2>
</hgroup>
<nav>
<ul id="main-nav">
<li><a href="#">Home</a></li>
</ul>
</nav>
<form id="searchform">
<input type="search">
</form>
</header>
<div id="content">
<article class="post">
blog post
</article>
</div>
<aside id="sidebar">
<section class="widget">
widget
</section>
</aside>
<footer id="footer">
footer
</footer>
</div>и надо ли?
Вот это точно можно вставить в штмл (только верх или низ не знаю)
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->а вот в каком окне стиля css и в каком месте надо вот это вставлять?
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}или вот это куда?
<link href="media-queries.css" rel="stylesheet" type="text/css">
Может всё же объясните, как применить статью относительно mybb-сайта? Я уверенна это пригодится многим.
Олюся
я у себя этого не вижу и куда надо ставить это
никуда. у тебя уже есть код сайта, т.е. форума. то есть структура со всеми классами и индификаторами у тебя есть
используй эту тему Новый FAQ по дизайну и CSS или установи фаербаг (подробнее тут)
Вот это точно можно вставить в штмл (только верх или низ не знаю)
это в html верх
а вот в каком окне стиля css и в каком месте надо вот это вставлять?
конкретно этот код не нужно никуда вставлять
ты должна составить свой по статье. пишешь:
@media screen and (max-width: ширинаpx) {
тут новые коды css
}
например вот так один из кусков нашей мобильной версии выглядит:
@media screen and (max-width: 970px) {
#pun-title td.title-logo-tdr {width: 10px;}
#pun-title td.title-logo-tdl {width: 98%;}
#pun-title td.title-logo-tdr img {display: none;}
.punbb {width: 96%;}
#pun-status .container {width: 95%;}
#marq-cont img {display: none;}
.pl-warning, .pl-share {display: none !important;}
.subscribelink a {margin-left: 0; margin-top: 0; position: relative;}
td#button-strike, td#button-left, td#button-font {display: none;}
#banner-up {margin-left: 385px;}
}ты должна составить свой по статье. пишешь:
да, забыла сказать... писать это можно в любом окне стиля (какое больше нравится) или просто в хтмл верх между тегами style:
<style>
тут коды стиля
</style>
Герда
спасибо, я попробую так сделать.
Герда
а вот это
<meta name="viewport" content="width=device-width; initial-scale=1.0">
куда вставлять?
Герда
у меня не получается одноколоночный сделать
вводила как по статье (только не вставляла
<meta name="viewport" content="width=device-width; initial-scale=1.0">
и
<link href="media-queries.css" rel="stylesheet" type="text/css">
т.к. не пойму куда)
вот код для max-width: 280px
@media screen and (max-width: 280px) {
html {
-webkit-text-size-adjust: none;
}
body {
font-size: 75%;
padding: 0;
}
#pun-title td.title-logo-tdr {width: 1px; position: static;}
#pun-title td.title-logo-tdl {width: 21%; position: static;}
#pun-title td.title-logo-tdr img {display: none;}
.punbb {width: 20%; position: static;}
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod, .punbb .main .tcr {display: none;}
#pun-status .container {width: 25%; position: static;}
#pun-announcement h2, #pun-announcement h2 span, #pun-announcement .container {display: none;}
#marq-cont img {display: none;}
.pl-warning, .pl-share {display: none !important;}
.subscribelink a {margin-left: 0; margin-top: 0; position: static;}
td#button-strike, td#button-left, td#button-font {display: none;}
#banner-up {margin 0px; position: static;}
}при уменьшении размера окна браузера одноколоночный не получается, а мне надо чтоб post-avtor был над post-box в post-body.
как это сделать?, а то у меня иначе post-box пустой. если я ввожу
post-avtor {display: none;}, то у меня и post-avtor и post-box пустые.
<meta name="viewport" content="width=device-width; initial-scale=1.0">
в html верх или в "раскрутку":
имя- viewport, содержание - device-width; initial-scale=1.0
<link href="media-queries.css" rel="stylesheet" type="text/css">
это те ваще зачем, если ты код в админке пишешь?
таким кодом вставляется ссылка на файл .css стиля
пример:
Код:<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0007/e3/f7/96296.css" />если откроешь ссылку кода, увидишь наш мобильный стиль: https://forumstatic.ru/files/0007/e3/f7/96296.css
html { -webkit-text-size-adjust: none; }
это тебе кто посоветовал писать?
#banner-up {margin 0px; position: static;}
и не надо копировать чужие коды, в которых не разбираешься. делай СВОЙ код, самостоятельно - тогда все получится.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » Оптимизация сайта под мобильные устройства. Создание PDA-версии сайта
