gpt4 book ai didi

css - 响应式设计不会缩小移动 [@media queries]

转载 作者:行者123 更新时间:2023-12-02 04:41:33 25 4
gpt4 key购买 nike

我是新手,不太明白为什么会这样,也不知道如何解决。

我正在使用@media 查询构建我的网站,以使其适合移动设备。当我从移动设备访问网站时,我看到了适合移动设备的版本,但当我尝试切换到桌面 View 时,仍然保留适合移动设备的版本,并且不显示桌面(正常) .

我对我的 *.css 文件做了如下操作:

my styles for global(normal - desktop) view
...
...
...
@media (max-width:500px){
my styles for mobile-friendly view
}

我不想在我的桌面 View 中使用@media,因为并非所有浏览器都支持@media,以防万一有人认为它可以解决这个问题.

希望得到您的帮助

最佳答案

始终确保包含以下内容 <meta>在您的 <head> </head> 中标记元素:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

viewport 标签用于以某种样式为您的网站提供服务,而不管设备如何。 width属性控制视口(viewport)(虚拟“窗口”) 的大小,并且可以设置为特定的像素大小或设备的宽度。 initial-scale属性控制页面加载时的缩放级别。 maximum-scale , minimum-scale , 和 user-scalable全部控制允许用户如何放大页面。

我个人已禁用用户可缩放以保持一致的页面 View ,例如当用户关注选择元素时它确保页面不会缩放。让我知道这是否解决了您的问题,否则我将需要一些您的 CSS 示例来找出您的问题!干杯~

关于css - 响应式设计不会缩小移动 [@media queries],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37102730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com