如何测试 html 文件的移动响应能力
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34398962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to test html file for mobile responsiveness
提问by Davez01d
I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?
我需要测试一个 html 文件的移动响应能力，但是我找到的所有资源都需要一个 URL 或一个本地主机，有没有办法只用一个 html 文件来测试响应能力？
回答by Hans
回答by Irrech
If you save your file .htmlyou can open with firefox or chrome, but i suggest you to use firefox developer edition https://www.mozilla.org/it/firefox/developer/
如果您保存文件.html，您可以使用 Firefox 或 chrome 打开，但我建议您使用 Firefox 开发人员版https://www.mozilla.org/it/firefox/developer/
If you use Firefoxyou can put in the menu -> development -> flexible display (ctrl+shift+m)
如果你使用Firefox你可以把菜单 -> 开发 -> 灵活显示 (ctrl+shift+m)
In Chrome(ctrl+maiusc+i + emulation)
在Chrome 中（ctrl+maiusc+i + 仿真）
In this page you can select the device to view.
在此页面中，您可以选择要查看的设备。
回答by GeorgeGeorgitsis
You have a lot of options to test it, but each option has it's benefits.
你有很多选择来测试它，但每个选项都有它的好处。
- You can minimize the browser!
- You can use device mode from chrome,mozilla etc
- You can find a lot of online responsive site testers for any resolution you want
- 您可以最小化浏览器！
- 您可以使用 chrome、mozilla 等的设备模式
- 您可以找到许多在线响应式站点测试人员，适用于您想要的任何分辨率
回答by D. Gramm
In my opinion, the best way to test responsiveness is in Chrome. Right click on the page and inspect. Then there will be a button to turn on responsive testing. You can choose the device to see how your page will render on all kinds of devices. This is better than resizing your window because there are slight differences in how pages render on different tablets and phones.
在我看来，测试响应能力的最好方法是在 Chrome 中。右键单击页面并检查。然后会有一个按钮来打开响应式测试。您可以选择设备以查看您的页面在各种设备上的呈现方式。这比调整窗口大小要好，因为页面在不同平板电脑和手机上的呈现方式略有不同。
回答by Lior
There is nothing like using a real phone. As an example, px sizes differ between various phones and can cause troubles. The height of the URL bar comes into play in vertical flex scrolling when the display occupies 100%.
没有什么比使用真正的手机更好的了。例如，不同手机的像素大小不同，可能会导致问题。当显示占据 100% 时，URL 栏的高度在垂直 flex 滚动中起作用。
To do this kind of testing, you can use tunneling - products like https://serveo.net/or ngrok.
要进行此类测试，您可以使用隧道 - 产品如https://serveo.net/或 ngrok。
回答by orlando f puleo
I use http://www.responsinator.comVery easy and complete, several types of mobile and table devices.
我使用http://www.responsinator.com非常简单和完整，有几种类型的移动和桌面设备。
回答by yanni joni
Google offers an online tool to check whether your web page is mobile-friendly or not! You can provide a URL or copy/paste your HTML.
Google 提供了一个在线工具来检查您的网页是否适合移动设备！您可以提供 URL 或复制/粘贴您的 HTML。
