Cordova 应用程序的图片和布局在某些设备中拉伸，特别是三星 Galaxy S4

Question

我最近使用 Cordova、Ionic 和 angularJs 构建了一个 android 应用程序。我正在通过 Cordova 运行它们来创建实际的应用程序。主要问题是它在三星 Galaxy S3、三星 Galaxy S6、华为等大多数设备上都能正常工作且完美。但另一方面，当我尝试在三星 Galaxy S4、三星 Note 或三星 Grand 上运行它时，图片和布局看起来过于夸张。我在 stackoverflow 中阅读了一些建议，建议将元数据更改为 target-densitydpi=medium-dpi，但它也不起作用。这是我的元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

这是它的外观以及在大多数设备中的外观：

这是它在 Galaxy S4、Note 和 Grand 中的外观。 ：

这里是我的这个页面的 html 代码，考虑到我所有的类都来自 Ionic 框架。

'>

<ion-content>
    <div class="row" style="margin-bottom: 4em;">
        <img src="pictures/bb.png" width="100%" height="100%" />
    </div>

    <div class="row">
        <div class=".col col-33 col-offset-5">
            <a href="" ng-click="checkAuthenticationAndNaviagte()">
                <img src="pictures/icons/coupon6.png" width="75" height="75"/>
            </a>
            <p class="category-title">Coupons</p>
        </div>

        <div class="col-33">
            <a href="" ui-sref="offersState">
                <img src="pictures/icons/offers6.png" width="75" height="75" />
            </a>

            <p class="category-title">App Offers</p>

        </div>

        <div class="col-33">
            <a href="" ui-sref="eventsState">
                <img src="pictures/icons/event6.png" width="75" height="75" />
            </a>
            <p class="category-title" >Events</p>
        </div>
    </div>

    <div class="row" >
        <div class=".col col-33 col-offset-5">
            <a ui-sref="RequestCouponState">
                <img src="pictures/icons/member6.png" width="75" height="75" />
            </a>
            <p class="category-title">Membership</p>
        </div>

        <div class="col-33">
            <a ui-sref="contactUs">
                <img src="pictures/icons/contact6.png" width="75" height="75"/>
            </a>
            <p class="category-title" >Contact us</p>
        </div>

        <div class="col-33">
            <a href="#" onclick="window.open('https://www.facebook.com/BeautyNetPage?ref=br_rs', '_system', 'location=yes'); return false;">
                <img src="pictures/icons/face6.png" width="75" height="75"/>
            </a>
            <p class="category-title">Facebook</p>
        </div>
    </div>

    <div class="row" >

        <div class=".col col-33 col-offset-5">
            <a href="#">
                <img src="pictures/icons/website6.png" onclick="window.open('http://www.beautynet.ps/', '_system', 'location=yes'); return false;" width="75" height="75" />
            </a>
            <p class="category-title" >Website</p>
        </div>
    </div>
</ion-content>

各位有什么建议吗？？

Answer 1

您所要做的就是将徽标图像的高度设置为像素值。