android - Cordova 应用程序图片和布局在某些设备中拉伸(stretch)，特别是 Samsung galaxy S4

Question

我最近使用 Cordova、Ionic 和 angularJs 构建了一个 android 应用程序。我正在通过 Cordova 运行它们来创建实际的应用程序。主要问题是它在大多数设备(如三星 Galaxy S3、三星 Galaxy S6、华为等)中都能正常且完美地运行。但另一方面，当我尝试在 Samsung Galaxy S4、Samsung Note 或 Samsung Grand 上运行它时，图片和布局看起来拉伸(stretch)太多。我在 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 中的样子。 :

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

'>

<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

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