PHP CSS Мобильный Отзывчивый

Question

PHP CSS Мобильный Отзывчивый

0

В настоящее время я работаю над тем, чтобы сделать страницу чувствительной к ряду мобильных платформ, включая поддержку настольных браузеров, iPhone, iPad, BB10 и BB7.

Как вы знаете, это не всегда самая простая задача.

Я пришел к тому моменту, когда я хотел бы, чтобы каждое устройство использовало другой файл CSS, поскольку это облегчает жизнь при разных размерах экрана.

Я нашел этот PHP-скрипт, который позволяет мне направлять пользователей на другие html-страницы... Это здорово, хотя я не чувствую его достаточно эффективным.

Вместо этого я хотел бы иметь возможность иметь этот скрипт для пользователей разных файлов.css на основе устройства.

У меня очень мало понимания PHP и я бы по достоинству оценил некоторую помощь здесь.

<?php
    // MOBILE
    $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
    $blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BB10");
    $blackberry2 = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $iPad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");

    // DESKTOP
    $windows = strpos($_SERVER['HTTP_USER_AGENT'],"Windows");
    $mac = strpos($_SERVER['HTTP_USER_AGENT'],"Mac");

    // REDIRECTS 
    // MOBILE
    if ($android == true) 
    { 
    header('Location: mobile.html');
    } 
    else if ($blackberry == true) 
    { 
    header('Location: mobile.html');
    }
    else if ($blackberry2 == true)
    {
    header('Location: mobile.html');
    }
    else if ($iphone == true) 
    { 
    header('Location: mobile.html');
    }
    else if ($ipad == true) 
    { 
    header('Location: mobile.html');
    }
    // DESKTOP
    else if ($windows == true) 
    { 
    header('Location: desktop.html');
    }
    else if ($mac == true) 
    { 
    header('Location: desktop.html');
    }
    ?>

Matt Kidd 04 апр. 2014, в 12:11

Источник

1

Отдельная таблица стилей на основе устройства вместо размера экрана звучит для меня как ужасная идея. Это IE условные снова и снова
PeeHaa 04 апр. 2014, в 09:40
1

Вы должны использовать медиа-запросы. Определите правила стиля, основанные на различных значениях min-width и max-width . Узнайте больше здесь, developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Viswalinga Surya S 04 апр. 2014, в 09:41

Теги:

php

html

css

mobile

2 ответа

2

Я хочу знать, почему вы используете древний путь, вы можете использовать адаптивную веб-концепцию для создания адаптивного веб-сайта в соответствии с разрешением.

Используйте twitter bootstrap.js или прочитайте этот http://getbootstrap.com/

PrashantG 04 апр. 2014, в 08:20

0

Я понимаю, что это определенно не лучший способ делать вещи. Не вдаваясь в подробности, у нас нет возможности сделать это в текущем проекте. Спасибо
Matt Kidd 04 апр. 2014, в 17:30

Ещё вопросы

Отдельная таблица стилей на основе устройства вместо размера экрана звучит для меня как ужасная идея. Это IE условные снова и снова
Вы должны использовать медиа-запросы. Определите правила стиля, основанные на различных значениях min-width и max-width . Узнайте больше здесь, developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Я понимаю, что это определенно не лучший способ делать вещи. Не вдаваясь в подробности, у нас нет возможности сделать это в текущем проекте. Спасибо

Filip Górny · Accepted Answer · 2014-04-04T07-16-00.000Z

Вам нужно проанализировать свой CSS через PHP.

<link rel="stylesheet" href="css.php">

Затем в вашем php:

<?php
    // MOBILE
    $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
    $blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BB10");
    $blackberry2 = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $iPad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");

    // DESKTOP
    $windows = strpos($_SERVER['HTTP_USER_AGENT'],"Windows");
    $mac = strpos($_SERVER['HTTP_USER_AGENT'],"Mac");

    // REDIRECTS 
    // MOBILE
    if ($android == true) 
    { 
    include('android.css');
    } 
    else if ($blackberry == true) 
    { 
    include('blackberry.css');
    }
    // others

Но как ребята в комментариях писали - это не "современный" подход ответственного css.

Спасибо за это! Знаете ли вы, как я мог бы сделать это в Javascript, в отличие от PHP?
Вы можете протестировать navigator.userAgent, а затем добавить ссылку с тегом таблицы стилей.