如何在浏览器中模拟Surface Pro 4

我有一个用户在Surface Pro 4上使用我的网络应用。该应用的渲染效果不是很好。我可以描述它的最好方法是，似乎浏览器窗口被调整到一个小尺寸，它试图把东西堆起来。然而，我相信他的浏览器已经最大化了。

由于我没有Surface，我一直在尝试让Chrome和Edge都模拟渲染问题。以下是我试过的方法。

Edge 有一个Surface Pro 4的预设。我想，一旦我选择了这个模式，我就会看到这个问题。实际上情况正好相反。实际上，我必须将浏览器窗口扩展到多个显示器才能看到所有内容（甚至是浏览器滚动条）。我怀疑这是因为Surface的分辨率比我的PC高。

Chrome浏览器。 没有Surface的预设，我也找不到有特定设置的人。我尝试了2738 x 1834和所有三种内置像素比例（1.0，2.0，3.0）。Chrome浏览器放大了，所以它都适合在我的屏幕上。它也没有渲染问题。改变像素比例没有任何区别。

我承认Web UI开发不是我的强项。而且我继承了很多这样的代码也没有用。但我真的在这里挠头。

如果我试着用手机预设来模拟，那么我可以看到渲染问题，因为这个应用对手机并不友好，也不需要这样。这似乎表明浏览器中的仿真工作正常。还剩下什么呢？我唯一能想到的是，他一定是使用了某种缩放方式，把事情搞乱了。

另外，我需要注意的是，我有一个朋友用iPad（对不起不知道是什么型号）也尝试了这个应用，他也看到了同样糟糕的渲染问题。事实上，他认为它的渲染效果比Surface还差。

编辑1:

我做了一个测试页面，显示了我们应用的头。它在这里。https:/app.astrolabe-analytics.comsurfaceTest

下面是正在测试的各种显示器的截图。

这里是Surface Pro 4的硬件--注意按钮是包着的。

下一个是iPad硬件（我不相信是专业版）。

下面是我设置Chrome浏览器来模拟Surface Pro的方法。

Edge中的Surface Pro 4仿真。请注意，我不得不将浏览器窗口扩展到我的第二个显示器上进行截图。

最后，Chrome中的标准外观

0
投票

看来，我这边的仿真效果很好。请检查以下屏幕截图。

另外，我还发现，如果我们调整浏览器窗口的大小（改变宽度属性），如果宽度太小，文字就会被包裹或消失。请看这张图。

所以，我想这个问题是和CSS样式有关的，作为一个变通的办法，你可以尝试给文字设置固定宽度属性（或者使用最小宽度属性）。navbar-nav 类，同时，你也可以参考以下链接来使用Bootstrap导航条样式。