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

本文介绍了更改移动设备的网站设计或调整浏览器大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

很抱歉，如果我不确定在某个地方一定有答案之前曾问过这个问题，但是由于某些或其他原因，我找不到它，可能是使用了错误的搜索查询

Im sorry if this has been asked before im sure somewhere there must be an answer for this but for some or other reason I cant find it, probably using wrong search query

我知道您可以使用媒体查询来定位不同的设备，例如:

I know you can use media queries to target different devices like so:

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

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

But what I would like to know is, how to change my websites design based on device it is viewed on?

示例

让我们说我的网站结构正常:

Lets say my normal site structure is like this:

如果是台式机

<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/网站布局，让我们说些类似的话

Now when user views my site on a mobile device how do I change my div / site layout, lets say to something different like this

如果是移动设备

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

希望这个即时询问有意义，这要感谢这个出色网站上的所有人

Hope what im asking makes sense, thanks to everyone on this amazing site for helping

推荐答案

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

I usually do this in my projects. I prepare content by default but its set to display: none, when media query detects the mobile device width it will render appropriate content for the device.

使用CSS Media Query

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

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