没有 iPhone ， win10 能测试 iPhone 网页显示效果么？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 539 天前的主题，其中的信息可能已经有所发展或是发生改变。

我做了一个博客网站，“高仿朋友圈”。 9 宫格的方法是先将 9 个 img 排 3 排，用原生 JS 获取单张照片的宽度，然后再把高度设置为宽度一样，这样就得到正方形效果了。我这有个 iPhone 14 pro 看正常，安卓也正常，有个朋友用的 iPhone 13 ，说图片被拉成长柱子了，手边没有 13 的机器，咋测试呢？

图片样式代码是这样，兼容性有问题吗？

/*  5 张以上图片  */
.grid-pics img:nth-child(1):nth-last-child(n + 5),
.grid-pics img:nth-child(1):nth-last-child(n + 5)~img {
    width: 32%;
    margin-bottom: 1%;
}

var lstPicItem = document.querySelectorAll("#article .pic-item");
    if (lstPicItem.length > 0) {
        lstPicItem.forEach(x => {
        x.style.height = lstPicItem[0].width + 'px';
    })
}

页面网址是： https://www.feidaoboke.com/pyq/

4 条回复 • 2023-07-07 19:39:36 +08:00

TRW

2023-07-07 16:43:07 +08:00

腾讯云真机

Corolin

2023-07-07 19:04:17 +08:00

尝试一下 css 解决咯？

.grid-pics {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.grid-pics .img {
aspect-ratio: 1;
background-repeat: no-repeat;
background-size: cover;
}

<div class="img" style="background-image: url( https://www.feidaoboke.com/pyq/zb_users/upload/demoImg/1.jpg);"></div>

forgottencoast

2023-07-07 19:12:28 +08:00

Chrome 的 F12 能模拟手机，试试看？

0ranger

2023-07-07 19:39:36 +08:00

这个 ok 不