更改移动设备的网站设计或调整浏览器大小答案

【问题标题】：Change website design for mobile devices or browser resize更改移动设备的网站设计或调整浏览器大小
【发布时间】：2015-09-21 21:57:38
【问题描述】：

对不起，如果在我确定某个地方必须有答案之前有人问过这个问题，但由于某种或其他原因我找不到它，可能使用了错误的搜索查询

我知道您可以使用媒体查询来定位不同的设备，如下所示：

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

但我想知道的是，如何根据查看的设备更改我的网站设计？

示例

假设我的正常网站结构是这样的：

如果桌面

<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>

希望我的问题是有意义的，感谢这个神奇网站上的每个人的帮助

【问题讨论】：

我知道这已经过时了，但对于其他看到这一点的人来说：考虑隐藏非关键的“视觉”部分以使所有内容都适合。更改标记通常意味着更改功能，这对最终用户来说不是一个好的体验。我去过太多次因为基本操作与桌面版本不匹配而无法使用的“移动”版本网站。

标签： html css mobile responsive-design

【解决方案1】：

我通常在我的项目中这样做。我默认准备内容，但它设置为显示：无，当媒体查询检测到移动设备宽度时，它将为设备呈现适当的内容。

使用 CSS 媒体查询

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;}
    }

请注意，您的页面可能需要很长时间才能加载。只需限制您需要更改的内容并具体说明即可。

【讨论】：

【解决方案2】：

您可以使用this module

要检测手机或平板电脑等移动设备，您可以使用此代码。

require_once '../Mobile_Detect.php';
$detect = new Mobile_Detect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');

【讨论】：

【解决方案3】：

如果你想用纯 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 做到这一点，check out this article

【讨论】：