如何在没有 iphone 的情况下测试响应式设计字体

Posted 2023-03-06

【中文标题】如何在没有 iphone 的情况下测试响应式设计字体

【英文标题】：How do I test responsive design font without actually having iphone

【发布时间】：2013-01-22 13:38:44

【问题描述】：

我实现了响应式设计的概念，但现在我们面临一个问题。内容似乎很适合框架内。我用过max-device-width 等等。我的字体大小都使用固定大小的像素，即 12px 等等。现在，当我把它交给我的客户时，他抱怨它在 iPhone 上看起来超级小。我实际上没有 iPhone 来测试这些设计。

是否可以在不使用实际设备的情况下对其进行测试？模拟器什么的？我通过调整浏览器窗口的大小在 Chrome 上对其进行了测试，但在实际设备上它看起来非常小而且很难阅读。附上一张截图：

【问题讨论】：

我不确定这是否能解决你的问题，但我使用这个：http://www.responsinator.com

***.com/questions/3882233/…

如果你有Mac，可以在Xcode自带的ios模拟器中测试网站。

@all：响应者显示正确的布局，但客户抱怨他看到的很小。在 responsinator 上我只看到 5 首歌曲，但在真正的 iPhone 上我看到 15 首 :(

【参考方案1】：

如果您有 Chrome 浏览器，则应尝试更改 user agent。

第 1 步： 打开 Chrome => 转到所需的网站 => 按 F12 => 元素面板应该会出现。

第 2 步：点击Settings 图标。它应该在右下角（如果设计没有改变）：

第 3 步：点击Overrides 标签：

第 4 步： 勾选 User Agent 并从下拉列表中选择一个设备。不要忘记查看Device metrics，您也可以在其中添加自定义值：

更多信息请访问Chrome Developer Tools。

---

更新：

对于 Chrome 版本 32+，请参阅 this link 以获取 chrome 开发者工具。

【讨论】：

正确。我现在看到 15 首歌曲。 ios 4 的分辨率是 960×640，我看到里面有 15 首歌曲。现在我该如何解决呢？如果字体更大，歌曲在桌面上看起来超级大。有什么想法吗？

你应该试试media queries。但是我不太清楚你的问题。

如果它是“正确的”，那么您可以选择它作为接受的答案。谢谢！

【参考方案2】：

你可以试试：responsive.is 该网站具有不同的方向和设备，您可以在这些设备上查看该网站的呈现方式。

【参考方案3】：

quirktools 的 Screenfly 是我使用的。对我来说就像一个魅力！

http://quirktools.com/screenfly/

【参考方案4】：

您可以尝试使用http://www.isresponsive.com 使您能够在不同的设计上测试响应式设计。