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

Question

我很抱歉,如果这个问题已被问到我确定某处必须有一个答案,但由于某些或其他原因我无法找到它,可能使用错误的搜索查询

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

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

希望我的要求是有道理的,感谢这个神奇的网站上的每个人都提供帮助

Answer 1

我通常在我的项目中这样做.我默认准备内容,但设置为display:none,当媒体查询检测到移动设备宽度时,它将为设备呈现适当的内容.

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

请注意,您的页面可能需要很长时间才能加载 只是限制你需要改变和具体的东西.