Android默认浏览器中的图像缩放比例不成比例

Question

我正在建立一个名为'Singular'的Wordpress主题之上的网站：Singular demo here

我注意到徽标图片在Android的默认浏览器上不成比例地缩放，至少在我的Galaxy SII上使用Jelly Bean 4.1。图像宽度似乎正确，但高度太高。徽标似乎被压扁了。这似乎与我的任何修改无关，但也发生在演示站点上。我已经向主题提供商邮寄了这个，但截止日期已经结束，所以我也试图找到解决方案。

我想知道这是一个已知的Android错误，还是特别与Singular主题有关？

原始代码似乎没有什么特别之处：

<body<?php ct_body_id('top'); ?> <?php body_class(); ?>>

    <header>
        <div class="container">
            <?php if($ct_options['ct_text_logo'] == "Yes") { ?>
                <div id="logo" class="content-fade">
                    <h2><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h2>
                </div>
            <?php } else { ?>
                <?php if($ct_options['ct_logo']) { ?>
                    <a href="<?php echo home_url(); ?>"><img id="logo" class="content-fade" src="<?php echo $ct_options['ct_logo']; ?>" alt="<?php bloginfo('name'); ?>" /></a>
                <?php } else { ?>
                    <a href="<?php echo home_url(); ?>"><img id="logo" class="content-fade" src="<?php echo get_template_directory_uri(); ?>/images/singular-logo.png" alt="WP Singular, a WordPress theme by Contempo" /></a>
                <?php } ?>
            <?php } ?>

我尝试将正确的高度和宽度属性硬编码到img标签，但它没有解决问题。我不确定下一步该尝试什么。有什么想法吗？

---

更新： 谢谢free3dom。根据Safari的Web Inspector，这是应用于该img标签的样式的最终结果：

-webkit-animation-delay: 0.5s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0.6000000238418579s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: fadein;
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
-webkit-font-smoothing: antialiased;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0s;
-webkit-transition-property: all;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
color: rgb(17, 158, 158);
cursor: auto;
display: block;
float: left;
font-family: 'Open Sans';
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 20px;
line-height: 28px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-width: 100%;
opacity: 1;
outline-color: rgb(17, 158, 158);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
text-decoration: none;
top: 2px;
vertical-align: baseline;
width: 174px;

嗯，宽度是定义的，但高度不是。 Android浏览器不会自动计算正确的高度吗？虽然，先前对宽度和高度值进行硬编码似乎无法解决问题。我最好重新检查一下是否完全确定。

除此之外，还有哪些东西引起了你的注意？我找不到任何明显对此问题负责的事情。