gpt4 book ai didi

css - @media(最大宽度)和移动浏览器

转载 作者:太空宇宙 更新时间:2023-11-03 18:38:11 24 4
gpt4 key购买 nike

这个问题实在是束手无策,求指教。

我有一个网页,我想为移动设备优化(使用 CSS 媒体查询)。在 <head> ,我有这个:

<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

但是在测试媒体查询时出现了一些问题:

1) 在我的 Huawei Ideos X1 上测试,显示宽度为 240px。所以,CSS 应该是这样的:

@media (max-width: 240px) {
body: { background-color: red; }
}

但它什么都不做。

2) “哪里可能有问题?”我说。所以,我给 <body> 显示屏幕分辨率的 javascript :

<div>
<script>
document.write(screen.width + 'x' + screen.height);
</script>
</div>

但它显示“320x425”。这很奇怪,我的手机屏幕宽度是 240px,而不是 320。

3) 没关系。我读到过有关自动缩放内容以在一个屏幕上显示更多内容的移动浏览器。也许我的移动浏览器缩小了,现在显示区域宽度为 320 像素。所以,我在 <body> 中添加了两行.第一个宽度为 240px,第二个宽度为 320px。期望两者都在没有滚动条的移动浏览器中呈现,爬到屏幕上:

<hr style="width: 240px;">
<hr style="width: 320px;">

令我惊讶的是,第一行 (240px) 爬上了屏幕,第二行 (320px) 超出了屏幕(80px)并且出现了水平滚动条。

所以,长话短说:Javascript 认为有 320 像素宽的屏幕可用。 CSS 认为有 320 像素宽的屏幕可用。但是只有 240px 可以适合屏幕。我 friend 的 iPhone 上也出现了类似的行为。

请指教,我的赌注在哪里?谢谢。

附言可在此处找到测试源代码:http://pastebin.com/ULNm4RfW

最佳答案

我认为如果您采用移动优先的方法进行设计,您的其中一个问题就可以得到解决。这意味着针对最小屏幕尺寸(移动设备)进行设计,然后逐渐增大。

你的 css 会从 max-width 值变成 min-width 值,就像这样......

@media screen and (min-width: 240px) {
CSS: here;
}

因此,您在开始时设置的所有基本样式都适用于较小的屏幕尺寸,而上述规则会设置以 240 像素或以上的任何屏幕尺寸开始的样式。

这也将消除使用任何 JavaScript 的需要,您应该尽量避免在浏览器嗅探屏幕尺寸时使用它。

关于css - @media(最大宽度)和移动浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18230960/

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