chrome 未响应

Is your site mobile-aware? Is it truly responsive? If it’s not, according to eMarketer, there are expected to be more than 1.75 billion smartphone users this year. By 2017 global mobile phone penetration will rise to 69.4% of the population.

您的网站是否支持移动设备？ 它真的React灵敏吗？ 据eMarketer称 ，如果不是这样，那么今年预计将有超过17.5亿智能手机用户。 到2017年，全球手机普及率将达到总人口的69.4％。

I know: You’ve heard the chants before; the internet is everywhere; next year the internet will only be viewed on a mobile device; desktop computers are going the way of the dinosaurs…

我知道：您以前听过圣歌； 互联网无处不在； 明年，只能在移动设备上查看互联网； 台式计算机正在像恐龙一样前进……

But seriously, that’s what’s happening! Whether you like it or not, if you don’t get on the bandwagon, that site you’ve invested so heavily in may soon have a very limited audience.

但是说真的，这就是发生了！ 不管您是否喜欢，如果您不喜欢这个潮流，那么您投入大量资金的那个网站可能很快就会吸引非常有限的观众。

But then it gets complicated, as there’s no one mobile landscape. With the release of the iPhone 6 and 6 Plus recently, there are nothing less than 46 competing devices, all with different resolutions and hardware capabilities. And in addition to that, there’s network speed to contend with.

但这变得复杂了，因为没有移动环境。 随着最近发布的iPhone 6和6 Plus，不下46种竞争设备，它们都具有不同的分辨率和硬件功能。 除此之外，还需要应对网络速度。

Whereas on the desktop, you might think only in terms of Wifi or DSL speed, with mobile handsets there’s all the different network data speeds, namely: GPRS, EDGE, 3G and LTE (4G).

在台式机上，您可能只考虑Wifi或DSL速度，而对于手机而言，网络数据的速度却各不相同，分别是： GPRS ， EDGE ， 3G和LTE(4G )。

While you can make a mobile-aware site, can you make one which handles such a wide range of devices that also works well across different data speeds?

虽然您可以制作一个可感知移动的网站，但您能否制作一个可以处理如此广泛的设备并且在不同数据速度下也能正常工作的网站？

I now want to show you two simple tools; tools which can help you respond to the most common devices and speeds and stay on top of the development issues, until your site’s perfect. Let’s start with number one.

现在，我想向您展示两个简单的工具； 这些工具可以帮助您响应最常见的设备和速度，并始终关注开发问题，直到您的网站完美为止。 让我们从第一开始。

Google Chrome浏览器中的移动仿真 (Mobile Emulation in Google Chrome)

With the release of Chrome 32 a new developer tool was added — mobile emulation. This tool is an absolute godsend for debugging mobile and responsive designs.

随着Chrome 32的发布，添加了一个新的开发人员工具- 移动仿真 。 该工具绝对是调试移动和响应式设计的天赐之物。

If you don’t already have it open, open it with one of the following options:

如果尚未打开，请使用以下选项之一将其打开：

• Press F12 (or Cmd+Alt+l on a Mac)按F12键(或在Mac上按Cmd + Alt + l键)

• Click Developer Tools under View -> Developer

  单击查看->开发人员下的开发人员工具。

• Right click anywhere on a website and click Inspect Element

  右键单击网站上的任意位置，然后单击检查元素

At the top of the developer tools window you’ll see a new icon, which looks like a mobile phone. Click that and the mobile emulation mode will be enabled for the site you’re currently on, as you can see in the screenshot below.

在开发人员工具窗口的顶部，您将看到一个新图标，看起来像一部手机。 单击该按钮，将为您当前所在的站点启用移动仿真模式，如下面的屏幕快照所示。

You can see the normal developer tools are available, but there are a number of additional options, and the site’s been rendered to simulate a mobile device, in this case an iPhone 6 Plus. Let’s look at it in some more detail now.

您可以看到可以使用常规的开发人员工具，但是还有许多其他选项，并且已渲染该站点以模拟移动设备，在这种情况下为iPhone 6 Plus。 现在让我们更详细地看一下。

设备配置 (Device Configuration)

At the top left, there’s a device configuration, allowing you to pick from one of 46 mobile devices to emulate. Below the device list you can see options for:

左上角有一个设备配置，可让您从46种移动设备之一中进行仿真。 在设备列表下方，您可以看到以下选项：

• Screen resolution屏幕分辨率
• Display rotation between landscape and portrait显示横向和纵向之间的旋转
• Set the device pixel ratio设置设备像素比例

• Fit the display within the visible viewing area or display

  使显示器适合可见的观看区域或显示器

  it at the full size

  全尺寸

网络配置 (Network Configuration)

Next, in blue, is the network configuration. There you can set the network speed, all the way from offline to no throttling. This will help you see just how fast, or slow, your site will load depending on the speed of the network the user is on.

接下来，蓝色是网络配置。 在那里，您可以设置网络速度，从脱机一直到无节流。 这将帮助您了解您的站点将根据用户所在网络的速度来加载的速度有多快。

Under ‘network’, you can manually set the user agent. This will help you see how your site will respond.

在“网络”下，您可以手动设置用户代理。 这将帮助您了解您的网站将如何响应。

断点 (Breakpoints)

Now what about those breakpoints? The tool will automatically detect all the breakpoints you’ve set in CSS and provide a link to each one. You can see in the image below it has detected 6. By clicking on each of them, you can see how the page renders at each.

现在那些断点呢？ 该工具将自动检测您在CSS中设置的所有断点，并提供指向每个断点的链接。 您可以在下面的图像中看到已检测到6。通过单击每个图标，您可以查看页面在每个图标上的呈现方式。

One point about User-Agent strings; if you don’t want to set them manually, you don’t have to. By clicking escape on your keyboard, you can open up further configuration options and pick from a list of pre-set user agents to spoof.

关于用户代理字符串的一点； 如果您不想手动设置它们，则不必这样做。 通过单击键盘上的“转义”，可以打开其他配置选项，并从预设的用户代理列表中进行欺骗。

In addition to this, you can also emulate hardware device sensors, including touch input, geolocation and an accelerometer.

除此之外，您还可以仿真硬件设备传感器，包括触摸输入 ， 地理位置和加速度计 。

Usersnap扩展 (Usersnap Extension)

With all the configurability this new edition provides, designing for mobile devices just became a whole lot easier. But that’s not the end of the story.

有了新版本提供的所有可配置性，移动设备的设计变得非常容易。 但这还不是故事的结局。

It’s one thing to see how the site renders under different conditions, but how do you share the results with your developers and designers?

查看网站在不同条件下的呈现方式是一回事，但是如何与开发人员和设计师共享结果呢？

The Usersnap Chrome extension integrates nicely with this new addition to the Chrome developer tools. You can take the screen annotation and reporting capability you’ll be familiar with if you’ve ever used the Usersnap Widget and apply it to your design sessions with the mobile emulation plugin.

Usersnap Chrome扩展程序与Chrome开发人员工具的这一新增功能很好地集成在一起。 如果您曾经使用过Usersnap窗口小部件，并将其应用于带有移动仿真插件的设计会话，则可以利用您熟悉的屏幕注释和报告功能。

If you don’t already have it, install it from the Chrome Web Store. Once installed, you’ll see a Usersnap icon appear in the Chrome toolbar. The first time you use it, a small prompt will appear indicating you have to configure it.

如果尚未安装，请从Chrome网上应用店安装。 安装完成后，您会在Chrome浏览器工具栏中看到一个Usersnap图标。 首次使用时，会出现一个小提示，指示您必须对其进行配置。

Click ‘ok’, and after logging in to Usersnap, you’ll be taken to the configuration page of the tool. At the bottom of the page, as below, you’ll see a list of your projects.

单击“确定”，然后登录到Usersnap之后，您将进入该工具的配置页面。 在页面底部，如下所示，您将看到一个项目列表。

Pick a relevant one from the list and click Select Project. With that done, you’re now ready to use the extension. Going back to the mobile emulation plugin, I noticed that when the page hits the 768px breakpoint, it stops rendering correctly.

从列表中选择一个相关项目 ，然后单击“ 选择项目” 。 完成此操作后，您就可以使用扩展程序了。 回到移动仿真插件，我注意到当页面达到768px断点时，它将停止正确呈现。

So I want to let my team know about it so I can get it fixed. Clicking on the Usersnap button opens up what I saw of the site in the Usersnap editor, where I have all the usual functionality available. I can add a comment, highlight, note, blackout, ruler, and draw onscreen.

所以我想让我的团队知道它，以便我将其修复。 单击“ Usersnap”按钮将打开我在Usersnap编辑器中看到的站点，在那里，我可以使用所有常用功能。 我可以添加注释 ， 突出显示 ， 注释 ， 停电 ， 标尺和在屏幕上绘制 。

You can see in the screenshot above that I’ve made some annotations for my team to let them know what the site looks like and that it needs some changes to have the site render correctly on a mobile device. Now you have even more flexibility and control than ever before to design, develop, and debug great web sites and applications.

您可以在上面的屏幕截图中看到，我为团队做了一些注释，以使他们知道网站的外观，并且需要进行一些更改才能使网站在移动设备上正确呈现。 现在，您具有比以往更大的灵活性和控制力，可以设计，开发和调试出色的网站和应用程序。

结语 (Wrapping Up)

So there you have it, two great tools to help you simplify the effort required to ensure cross-device compatibility of your website or web app.

因此，这里有两个很棒的工具可帮助您简化确保网站或Web应用程序跨设备兼容性所需的工作。

Have you tried them yet? What’s your experience been like?

你试过了吗？ 您的经历如何？

翻译自: https://www.sitepoint.com/better-responsive-website-testing-google-chrome/

chrome 未响应