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

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

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

【问题讨论】:

标签: html css mobile responsive-design


【解决方案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。

【讨论】:

  • 当我删除它时,它似乎固定在980。我如何使它成为720?
  • 去掉这行应该会自动缩小。
【解决方案3】:

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

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

【讨论】:

  • 另外,在各种屏幕尺寸上测试您的代码!您可能需要嵌入与任何屏幕一样大或更大的资产(并希望微不足道的硬件可以很好地缩小屏幕), 或者,您可能需要捆绑多个资产不同的维度。 “它会变得丑陋”,但也“不可预测”。显示屏是便携式设备中最昂贵的组件之一,大量工程师正在努力制造“在杂货店出售的更便宜的手机”。
猜你喜欢
  • 1970-01-01
  • 2016-07-27
  • 1970-01-01
  • 2016-10-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-06-07
相关资源
最近更新 更多