html - 通过智能手机 OnePlus 3T 在网站上的字体大小和 img 高度太大

标签 html css responsive-design height font-size

我刚刚推出了我的网站的浏览器移动版本,在我尝试过的所有设备上看起来都符合预期,包括通过 Chrome DevTools 的设备模拟器使用的许多不同尺寸的设备。

但是,一位用户刚刚报告说,他在 OnePlus 3T 智能手机上看到的图像和文本都太大了。

预期的智能手机布局:

Expected smartphone layout

OnePlus 3T 布局:

Layout with OnePlus 3T 1

Layout with OnePlus 3T 2

我试图在 Chrome 的设备模拟器中重现它,但没有成功。 我在 font-sizeheight 的 CSS 中使用 px 作为单位。

OnePlus 3T的屏幕有以下规范,我觉得很正常:

Size 5.5 inches, 83.4 cm2 (~73.1% screen-to-body ratio)

Resolution 1080 x 1920 pixels, 16:9 ratio (~401 ppi density)

知道为什么一切都显得那么大吗?

Here指向其中一种布局的链接,以备不时之需。

更新

显然,问题与元标记有关

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

智能手机以某种方式应用元标记,或产生相同效果的东西...

最佳答案

听起来很明显,但他是否在 Android 设置 > 显示下更改了字体大小或显示大小?

关于html - 通过智能手机 OnePlus 3T 在网站上的字体大小和 img 高度太大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49321863/

相关文章:

css - 幻灯片放映的最小高度不起作用

javascript - 如何使用带有 Bootstrap 的 Handlebars 在下拉列表中选择和显示项目

javascript - 将 ReactDOM.createPortal() 与 document.body 一起使用是否安全?

html - 当 Bootstrap 元素宽度被修改时,我如何在媒体查询中保持一致

javascript - 无法将元素固定到矩形

css - AngularJS:当过滤器没有返回结果时应用 css 类

css - Bootstrap 中的响应式导航栏

html - 如何制作固定菜单栏,使其在调整浏览器窗口大小时不移动

html - CSS 如何制作完美对齐的左(或右)边框?

jQuery 在嵌套数组的名称中进行选择