强制更小的屏幕缩放到更大的分辨率？答案

【问题标题】：Force smaller screen to scale to a larger resolution?强制更小的屏幕缩放到更大的分辨率？
【发布时间】：2016-07-11 13:54:36
【问题描述】：

我的网站至少需要 720 像素的宽度。 Iphone 6 显示分辨率为 1334x750，但其浏览器报告为 667px。三星 S5 应该是 1080x1920，但浏览器报告 640。

我知道屏幕可以处理细节，但我不确定如何获得更大的分辨率。我需要 720px 作为最小宽度，那么我该怎么做才能让手机

【问题讨论】：

【解决方案1】：

你需要在头部代码<meta name="viewport" content="width=device-width,initial-scale=1">开始这个

然后将媒体查询添加到支持所有当前设备的 CSS 表 http://codepen.io/mlegg10/pen/JKdOaj

【讨论】：

我很困惑。谷歌搜索我想出了如何测试横向，但现在我不知道如何将它锁定到 720px 宽度。我知道如何检测它，但我有两个 360 像素图像，我需要两个并排在屏幕上（测试真实站点）。
您是否制作了一个测试页面并将其添加到您的测试 css 页面？
我做到了，但我不确定发生了什么。看起来它所做的只是在 chrome 中显示媒体查询，但页面看起来完全一样。我相信我应该为每个设备添加样式。我不确定如何将 720 像素宽度的页面缩放到此设备宽度
您可以发布一个 jsfiddle 或您尝试过的所有代码吗？
我正在使用 chrome 进行测试。我的手机 > 800 像素，所以我不知道我是否使用 jsfiddle.net/y3zmmLek 修复了它

【解决方案2】：

如果我理解正确，您希望将内容宽度缩小到视口的宽度。这通常是自动完成的，除非代码在页面的 head 部分中包含以下行：

<meta name="viewport" content="width=device-width, initial-scale=1">

所以如果这个是在你的代码中，删除它。（但请注意，您以这种方式使您的页面无响应，这在当今是相当不寻常的！）

关于您对设备像素的观察：这与“像素密度”有关，这对于提高文本（字体）和矢量图形以及提供高分辨率图像的图像的显示/清晰度很重要到浏览器。例如，iPhone 6 实际上有 1334 个物理像素的高度（比例 1:2），但是在涉及 CSS 像素单位时，它被视为 667px。

【讨论】：

【解决方案3】：

在使用代码设计之前在.css代码中输入这个

@media 仅屏幕和 (min-width:720px) and (max-width:1336px) and (min-resolution

【讨论】：

另外，在各种屏幕尺寸上测试您的代码！您可能需要嵌入与任何屏幕一样大或更大的资产（并希望微不足道的硬件可以很好地缩小屏幕）， 或者，您可能需要捆绑多个资产不同的维度。 “它会变得丑陋”，但也“不可预测”。显示屏是便携式设备中最昂贵的组件之一，大量工程师正在努力制造“在杂货店出售的更便宜的手机”。