Изменить дизайн сайта для мобильных устройств или изменить размер браузера

Извините, если это было задано, прежде чем я уверен, что где-то должен быть ответ на этот вопрос, но по той или иной причине я не могу найти его, возможно, используя неправильный поисковый запрос

Я знаю, что вы можете использовать медиа-запросы для таргетинга на разные устройства, например:

@media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }
}

Но я хотел бы знать, как изменить дизайн моего веб-сайта в зависимости от устройства, на котором он просматривается?

Пример

Допустим, моя нормальная структура сайта выглядит следующим образом:

if desktop

<div id="user">
    <div id="profilePic">
        <img src="images/responSiveTest/ppic.PNG" class="p-img" />
    </div>
    <div id="uname">
        <h4 style="color:white">Welcome  Guest</h4>
        <p style="color:white">Please Log in</p>
    </div>
</div>

Теперь, когда пользователь просматривает мой сайт на мобильном устройстве, как мне изменить мой div /макет сайта, скажем, что-то другое, например это

если мобильное устройство

<div id="mobileNav">
    <div id="namePic">
        <!-- Mobile user -->
    </div>
</div>

Надеюсь, что то, что я спрашиваю, имеет смысл, спасибо всем на этом удивительном сайте за помощь

4 голоса | спросил Timothy Coetzee 4 J000000Saturday15 2015, 08:38:31

3 ответа


0

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

с CSS Media Query

HTML

<div id="content">
    <div class="desktop">
        <!--
            some content and markups here. by default this is loaded in desktop
        -->
    </div>

    <div class="mobile_device_380px">
        <!-- content and some markups for mobile -->
    </div>

    <div class="mobile_device_480px">
        <!-- content and some markups for mobile -->
    </div>
</div>

CSS

  /* if desktop */
    .mobile_device_380px {
        display: none;
    }
    .mobile_device_480px {
        display: none;
    }


    /* if mobile device max width 380px */
    @media only screen and (max-device-width: 380px) {
        .mobile_device_380px{display: block;}       
        .desktop {display: none;}
    } 

    /* if mobile device max width 480px */
    @media only screen and (max-device-width: 480px) {
       .mobile_device_480px{display: block;}
       .desktop {display: none;}
    }


Обратите внимание, что загрузка страницы может занять много времени. просто ограничьте то, что вам нужно изменить, и будьте конкретны.

ответил Mr.Dev 4 J000000Saturday15 2015, 11:39:52
0

Если вы хотите сделать это с чистым JavaScript, вот оно -

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code.. 
}

Опять же, вы можете сделать это с помощью jquery -

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Если вы хотите сделать это с помощью PHP, ознакомьтесь с этой статьей

ответил WebDevRon 4 J000000Saturday15 2015, 09:20:18
0

Вы можете использовать этот модуль

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

require_once '../Mobile_Detect.php';
$detect = new Mobile_Detect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
ответил Stanimir Dimitrov 4 J000000Saturday15 2015, 10:54:28

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132