core(content-width): not applicable on desktop

lighthouse-core/audits/content-width.js

@@ -19,23 +19,37 @@ class ContentWidth extends Audit {
       description: 'If the width of your app\'s content doesn\'t match the width ' +
           'of the viewport, your app might not be optimized for mobile screens. ' +
           '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/content-sized-correctly-for-viewport).',
-      requiredArtifacts: ['ViewportDimensions'],
+      requiredArtifacts: ['ViewportDimensions', 'HostUserAgent'],
     };
   }
 
   /**
    * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
    * @return {LH.Audit.Product}
    */
-  static audit(artifacts) {
+  static audit(artifacts, context) {
+    const userAgent = artifacts.HostUserAgent;
     const viewportWidth = artifacts.ViewportDimensions.innerWidth;
     const windowWidth = artifacts.ViewportDimensions.outerWidth;
     const widthsMatch = viewportWidth === windowWidth;
 
-    return {
-      rawValue: widthsMatch,
-      explanation: this.createExplanation(widthsMatch, artifacts.ViewportDimensions),
-    };
+    // TODO(phulce): refactor this `isMobile` boolean to be on context
+    const isMobileHost = userAgent.includes('Android') || userAgent.includes('Mobile');
+    const isMobile = context.settings.emulatedFormFactor === 'mobile' ||
+      (context.settings.emulatedFormFactor !== 'desktop' && isMobileHost);
+
+    if (isMobile) {
+      return {
+        rawValue: widthsMatch,
+        explanation: this.createExplanation(widthsMatch, artifacts.ViewportDimensions),
+      };
+    } else {
+      return {
+        rawValue: true,
+        notApplicable: true,
+      };
+    }
   }
 
   /**

lighthouse-core/test/audits/content-width-test.js

@@ -13,22 +13,47 @@ const assert = require('assert');
 describe('Mobile-friendly: content-width audit', () => {
   it('fails when scroll width differs from viewport width', () => {
     const result = Audit.audit({
+      HostUserAgent: 'Desktop',
       ViewportDimensions: {
         innerWidth: 100,
         outerWidth: 300,
       },
-    });
+    }, {settings: {emulatedFormFactor: 'mobile'}});
+
+    assert.equal(result.rawValue, false);
+    assert.ok(result.explanation);
+  });
+
+  it('fails when host user agent is a phone', () => {
+    const result = Audit.audit({
+      HostUserAgent: 'Mobile Android',
+      ViewportDimensions: {
+        innerWidth: 100,
+        outerWidth: 300,
+      },
+    }, {settings: {emulatedFormFactor: 'none'}});
 
     assert.equal(result.rawValue, false);
     assert.ok(result.explanation);
   });
 
   it('passes when widths match', () => {
     return assert.equal(Audit.audit({
+      HostUserAgent: '',
       ViewportDimensions: {
         innerWidth: 300,
         outerWidth: 300,
       },
-    }).rawValue, true);
+    }, {settings: {emulatedFormFactor: 'mobile'}}).rawValue, true);
+  });
+
+  it('not applicable when device emulation is turned off', () => {
+    return assert.equal(Audit.audit({
+      HostUserAgent: 'Mobile Android Chrome',
+      ViewportDimensions: {
+        innerWidth: 300,
+        outerWidth: 450,
+      },
+    }, {settings: {emulatedFormFactor: 'desktop'}}).notApplicable, true);
   });
 });