Не работает мобильный вид страницы - HTML и CSS

Osanve · 16.08.2011, 14:53

Здравствуйте!

Имеется код страницы (привожу только основное):

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="ru-RU" xml:lang="ru-RU" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>
    
    <link rel="stylesheet" href="../main.css" media="screen" />
    <link rel="stylesheet" href="../style.css" media="screen" />
    <link rel="stylesheet" href="../main_mobile.css" media="handheld" />
    <link rel="stylesheet" href="../style_mobile.css" media="handheld" />
</head>

<body>
    <div id="header">
    </div>
    <div id="navigation">
    </div>
    <div id="languages">
    </div>
    <div id="information">
    </div>
    <div id="rightcolumn">
    </div>
    <div id="footer">
    </div>
</body>

</html>

И следующие CSS-файлы

main.css

Код HTML:

#header {position: fixed;
         overflow: auto;
         width: 175px;
         left: 50%;
         margin-left: -541px;
         margin-top: 8px;
         padding: 10px;
         z-index: 100;}

#navigation {position: fixed;
             overflow: auto;
             width: 665px;
             left: 50%;
             margin-left: -346px;
             margin-top: 8px;
             padding: 10px;
             z-index: 100;}

#information {width: 650px;
              position: absolute;
              left: 50%;
              margin-left: -340px;
              padding: 10px;
              top: 2.2em;}

#languages {width: 200px;
            position: absolute;
            overflow: auto;
            left: 50%;
            margin-left: 339px;
            margin-top: 8px;
            padding: 10px;}

#rightcolumn {width: 200px;
              position: absolute;
              overflow: auto;
              left: 50%;
              margin-left: 339px;
              margin-top: 54px;
              padding: 10px;}

#footer {width: 100%;
         position: fixed;
         left: 0;
         margin: 0;
         padding: 0;
         bottom: 0;
         border-top: 1px solid #000000;
         z-index: 100;}

main_mobile.css

Код HTML:

#header {width: 100%;}

#navigation {width: 100%;}

#language {width: 100%;}

#information {width: 100%;}

#rightcolumn {width: 100%;}

#footer {width: 100%;
         border-top: 1px solid #000000;}

style.css и style_mobile.css не привожу, т.к. они отвечают за цветовое оформление.

Страница лежит в /RU/
Файлы стилей лежат в /

Захожу на страницу с компа - отображается всё как надо (т.е. согласно файлу main.css). Захожу с телефона (Android 2.1, браузер Dolphin HD и стандартный WebKit) отображается согласно файлу main.css, хотя должен, как я понимаю, отображаться согласно файлу main_mobile.css.

В чем может быть проблема?
Заранее спасибо.

P.S. Поис по форуму результатов не дал. Google выдал способ через тег <link /> (т.е. который я привел), до этого было:

Код HTML:

<style type="text/css" media="screen">
    @import url("../main.css");
    @import url("../style.css");
</style>
<style type="text/css" media="handheld">
    @import url("../main_mobile.css");
    @import url("../style_mobile.css");
</style>

но результат тот же.

Osanve · 16.08.2011, 16:46

Проблема решилась следующим образом (только основные части):

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="ru-RU" xml:lang="ru-RU" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>
    
    <?php
        if(!is_mobile())
        {
            echo "<link rel=\"stylesheet\" href=\"../main.css\" />";
            echo "<link rel=\"stylesheet\" href=\"../style.css\" />";
        }
        else
        {
            echo "<link rel=\"stylesheet\" href=\"../main_mobile.css\" />";
            echo "<link rel=\"stylesheet\" href=\"../style_mobile.css\" />";
        }
    ?>
</head>

<body>
    <div id="header">
    </div>
    <div id="navigation">
    </div>
    <div id="languages">
    </div>
    <div id="information">
    </div>
    <div id="rightcolumn">
    </div>
    <div id="footer">
    </div>
</body>

</html>

Где is_mobile() - ужасная функция взятая отсюда: Определение мобильных браузеров на PHP

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вывод массива в вид работает неправильно	romanet	PHP	8	06.07.2011 14:55
.....страницы с одинаковым кодом имеют разный вид...	vedro-compota	HTML и CSS	7	16.12.2010 19:50
Мобильный агент	Сергей-123	Помощь студентам	0	29.11.2010 17:52
Внешний вид страницы	Syltan	JavaScript, Ajax	1	28.04.2010 13:41