问题标签 [device-width]

在 CSS 中为实现响应式网页设计的 viewport 元标记中，我们设置了 width = device-width <meta name="viewport" content="width=device-width">，这样页面的宽度就等于设备的宽度，这样用户就不必滚动查看页面，但高度呢？浏览器是否根据宽度推断高度并使其成为设备高度？？？

我正在尝试为不同的浏览器宽度设置两种不同的视口设置。

第一个视口设置适用于宽度超过 680 像素的设备（尤其是 iPad 和桌面设备）：

宽度小于 680 像素的设备的第二个视口：

我试图解决视口宽度 CSS 媒体查询，以便能够询问当前浏览器宽度：

但似乎，我的视口被浏览器忽略了。有人有一个想法，问题可能是什么？

感谢你们！

我需要通过JS检测IOS设备的设备，对于iphone-6我通过比率和devicePixelRatio检查它，我没有找到任何信息来检查设备是否是iPhone 7 plus。

我找到了旧设备的信息，

iPhone6 和 iPhone 6 Plus 的设备宽度 css 视口大小是多少

或这个

http://mydevice.io/devices/

我正在设计需要响应的网站。

我的问题是，在移动设备中，这些网站起初显示的宽度比屏幕宽。这意味着我可以向左或向右移动它，就像主容器没有“固定”到 100%。但它是：

但是一旦我“捏”屏幕（用手指一起按），网站就完美呈现，所有 DIVS 都在屏幕内，网站可读。就像一个完美的响应式网站。

如果我刷新或导航到子页面，该站点再次比屏幕大，需要放在一起，一切都会再次正常。

它发生在 414 像素宽以下的所有智能手机（Android 和 iphone）中。平板电脑及以上都可以

我怎么能对我的网站“说”它们应该在设备内打开，无论它在哪里？

我知道这听起来很奇怪，但确实是有原因的，这符合用户的最大利益。我知道让浏览器自动最大化并设置为 100% 可能会出现问题，但是如果窗口未最大化且缩放不是 100%，所有用户将看到一条消息“请最大化您的窗口并设置缩放到 100%”。我需要在 Chrome、Firefox 和 IE 中完成这项工作……至少。

我不想让它成为“全屏模式”，只是最大化窗口。

如果“强制”在“保持”100% 和最大窗口的意义上是有问题的，那么如何将缩放设置为 100% 并在初始加载时最大化窗口？

我正在实现一个插件，用户可以根据需要放大和缩小网页内容。该插件将应用于任何移动响应网站。我实现了放大使用

对于火狐

对于铬

我已将图像附在底部。这里右边和底部的黑条是插件部分。
问题是桌面放大视图。溢出发生并且内容溢出被隐藏。因此，当用户单击桌面上的放大按钮时，我想显示移动设备的放大版本而不是桌面视图的放大版本。

我试图通过使用 Javascript 更改或添加视口元标记来解决此问题。

<meta name="viewport" content="width=400, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">

这里 400 是移动设备的宽度。

但它什么也没改变。

如果我可以使用Javascript进行设置，似乎可以轻松解决device-width，但尚未找到解决方案。

我已经在这个问题上工作了 2 天，任何有此领域经验的人，感谢您的帮助！

甚至可能吗？

桌面原图：

桌面放大视图：

手机原图：

我想要两种尺寸的图像，用于小屏幕和大屏幕。使用fancybox，我使用该srcset属性来更改fancybox 演示中描述的全视图图像，如下所示：

来自 fancybox 的完整示例：https ://codepen.io/anon/pen/wNdyYm?editors=1000

在我的页面的移动设备上，我设置了 meta ：

<meta name="viewport" content="width=device-width" />

但是用fancybox，没有设置选项，手机上加载的是高清（1200px）而不是小。

我能做些什么 ？是否有任何 jQuery hack 或其他任何东西？

谢谢

我正在开发的 Cordova 应用程序有问题。我使用 mdpi 设备进行测试，一切看起来都很好。我的宽度为 800，密度值为 1。我的视口设置如下：

现在，我在另一台设备 xhdpi 上安装了我的应用程序。我现在的问题是密度值为 2，屏幕宽度为 1200，我的 window.width 只有 600，这弄乱了所有应用程序，尤其是对于表格...

任何想法？非常感谢！

抱歉这个模棱两可的问题，在这里编码菜鸟。本质上，我有一个站点，其中整个容器设置为 100vw，然后字体大小也设置为 vw。这样无论我如何扩展网站，无论是在移动设备还是桌面设备上，它都能很好地显示。
但是，我希望它在桌面上显示，就好像它是一个移动大小的屏幕（基本上是你在 Chrome 中执行移动视图时获得的视图）。
如果我将容器的宽度调整为小于 100vw，那很好，但是由于字体仍然是相对于视口设置的，因此对于该宽度来说它们变得太大了。所以基本上我想找到一种方法来告诉计算机，“即使你的实际设备宽度是这个，就好像设备宽度是这个一样”。

我<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=yes">在我的 html 文件中，并尝试将宽度设置为各种 px 数量而不是设备宽度，但仍然没有运气。非常感谢您的帮助！

我有一个非常大的网站，有许多不同的元素和生成的内容。无条件地将 a 添加到所有页面的 HTML 中似乎不切实际meta[@name="viewport"]，因为那样它可能会分解各种元素，和/或使某些徽标或图形不必要地变大。

我们更愿意使用 CSS 媒体查询，例如@media (width: 980px), (hover: none) {…}，并增加font-size实际文本的 。这可以通过 部分自动完成-webkit-text-size-adjust，但是，该功能似乎 100% 半生不熟，因为它只接受缩放百分比而不考虑视口的大小，即使在具有景观的单个设备上也会有所不同与纵向模式。

• 问题：有没有办法确定font-size我应该在我的980px视口中使用的合适的值来匹配font-size已经设置的viewport默认值？widthdevice-width