时间戳

首页 > 解决方案 > 为什么具有相同像素比的手机上 2 个元素的高度不同？

ios - 为什么具有相同像素比的手机上 2 个元素的高度不同？

问题描述

我正在创建一个 react-native 应用程序，但我很困惑手机之间的点值有何不同。我已经确认 iPhone 8 和 iPhone 11 的像素密度均为 2 （Apple 的设备屏幕尺寸和像素密度列表），并且 Expo 期望相同。（世博会 PixelRatio 文档）

但是，如果我创建一个 View 元素并在 iPhone 8 和 iPhone 11 上将其高度设为 400，它们的尺寸显然不同。为什么会这样？

代码示例如下：

import React from 'react';
import {View, PixelRatio} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

const TestComponent = () => {
  console.log('Device.modelName is: ', Device.modelName, 'Pixel ratio.get is: ', PixelRatio.get(), 'getPixelSizeForLayoutSize(400)', PixelRatio.getPixelSizeForLayoutSize(400), 'getFontScale', PixelRatio.getFontScale());
  return (
    <SafeAreaView>
      <View style={{backgroundColor: 'blue', height: 400}}></View>
    </SafeAreaView>
  }
)

正如预期的那样，我的控制台正在记录：

Device.modelName is: iPhone 8 Pixel ratio.get is: 2 getPixelSizeForLayoutSize(400) 800 getFontScale 1

Device.modelName 为：iPhone 11 Pixel ratio.get 为：2 getPixelSizeForLayoutSize(400) 800 getFontScale 1

但 iPhone 8 上的元素显然更高

在此处输入图像描述

标签： iosreact-nativeexpo

解决方案

当我选择每部手机并单击窗口-> 物理尺寸时，每部手机上元素的高度都相同。

我不确定为什么它以前不起作用。可能影响像素比率的默认设置有些奇怪，或者我做了一个我不记得的更改。

推荐阅读