<style>
/* Changing the layout to use less space for mobiles */
@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {
#email-body { min-width: 30em !important; }
#email-page { padding: 8px !important; }
#email-banner { padding: 8px 8px 0 8px !important; }
#email-avatar { margin: 1px 8px 8px 0 !important; padding: 0 !important; }
#email-fields { padding: 0 8px 8px 8px !important; }
#email-gutter { width: 0 !important; }
}
</style>
<div id="email-body">
<table id="email-wrap" align="center" border="0" cellpadding="0" cellspacing="0" style="background-color:#f0f0f0;color:#000000;width:100%;">
<tr valign="top">
<td id="email-page" style="padding:16px !important;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color:#ffffff;border:1px solid #bbbbbb;color:#000000;width:100%;">
<tr valign="top">
<td bgcolor="#3b4d64" style="background-color:#3b4d64;color:#ffffff;font-family:Arial,FreeSans,Helvetica,sans-serif;font-size:12px;line-height:1;"><img src="https://issues.jboss.org/s/en_USe5kdkq-1988229788/6109/58/_/jira-logo-scaled.png" alt="" style="vertical-align:top;" /></td>
</tr><tr valign="top">
<td id="email-banner" style="padding:32px 32px 0 32px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr valign="top">
<td style="color:#505050;font-family:Arial,FreeSans,Helvetica,sans-serif;padding:0;">
<img id="email-avatar" src="https://community.jboss.org/people/vineet.reynolds/avatar/16.png" alt="" height="48" width="48" border="0" align="left" style="padding:0;margin: 0 16px 16px 0;" />
<div id="email-action" style="padding: 0 0 8px 0;font-size:12px;line-height:18px;">
<a class="user-hover" rel="vineet.reynolds" id="email_vineet.reynolds" href="https://issues.jboss.org/secure/ViewProfile.jspa?name=vineet.reynolds" style="color:#3b73af;">Vineet Reynolds</a>
commented on <img src="https://issues.jboss.org/images/icons/issuetypes/bug.png" height="16" width="16" border="0" align="absmiddle" alt="Bug"> <a style='color:#3b73af;text-decoration:none;' href='https://issues.jboss.org/browse/JDF-515'>JDF-515</a>
</div>
<div id="email-summary" style="font-size:16px;line-height:20px;padding:2px 0 16px 0;">
<a style='color:#3b73af;text-decoration:none;' href='https://issues.jboss.org/browse/JDF-515'><strong>Mobile Browser detection in kitchensink-html5-quickstart is no longer reliable</strong></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td id="email-fields" style="padding:0 32px 32px 32px;">
<table border="0" cellpadding="0" cellspacing="0" style="padding:0;text-align:left;width:100%;" width="100%">
<tr valign="top">
<td id="email-gutter" style="width:64px;white-space:nowrap;"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<td colspan="2" style="color:#000000;font-family:Arial,FreeSans,Helvetica,sans-serif;font-size:12px;padding:0 0 16px 0;width:100%;">
<div class="comment-block" style="background-color:#edf5ff;border:1px solid #dddddd;color:#000000;padding:12px;"><p>This definitely needs improvement, but it's not straightforward either. I'll use this space to discuss first before incorporating a better solution.</p>
<p>The problem is mostly because the real world dimensions for the device are not available. 640px on a mobile device is different from 640px on a desktop or laptop. We have the following options today:</p>
<ul>
<li>Use the Modernizr.touch test instead of device width test. <a href="https://github.com/Modernizr/Modernizr/issues/548" class="external-link" rel="nofollow">This is not clean</a>, since this verifies for WebKit style touch support. It fails on <a href="https://github.com/Modernizr/Modernizr/issues/753" class="external-link" rel="nofollow">IE10 Metro</a>.</li>
<li>Use the script provided by <a href="http://detectmobilebrowsers.com/" class="external-link" rel="nofollow">detectmobilebrowsers.com</a>. Released under public domain. The downside is that this is user-agent sniffing and needs updating as new mobile browsers are released.</li>
<li>Add a orientation criteria to the test, like <tt>Modernizr.mq('(max-device-width: XYZpx) and (orientation: portrait)')</tt>. The downside is that the test would fail in landscape mode.</li>
</ul>
</div>
<div style="color:#505050;padding:4px 0 0 0;"> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td><!-- End #email-page -->
</tr>
<tr valign="top">
<td style="color:#505050;font-family:Arial,FreeSans,Helvetica,sans-serif;font-size:10px;line-height:14px;padding: 0 16px 16px 16px;text-align:center;">
This message is automatically generated by JIRA.<br />
If you think it was sent incorrectly, please contact your JIRA administrators<br />
For more information on JIRA, see: <a style='color:#3b73af;' href='http://www.atlassian.com/software/jira'>http://www.atlassian.com/software/jira</a>
</td>
</tr>
</table><!-- End #email-wrap -->
</div><!-- End #email-body -->