900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > native字体尺寸自适应 react_react-native中 屏幕以及字体 大小适配

native字体尺寸自适应 react_react-native中 屏幕以及字体 大小适配

时间:2018-12-29 16:28:53

相关推荐

native字体尺寸自适应 react_react-native中 屏幕以及字体 大小适配

import {

Platform,

Dimensions,

PixelRatio

} from 'react-native';

// iPhoneX

const X_WIDTH = 375;

const X_HEIGHT = 812;

// screen 屏幕宽度

export const SCREEN_WIDTH = Dimensions.get('window').width;

// screen 屏幕高度

export const SCREEN_HEIGHT = Dimensions.get('window').height;

/*

是否iPhone X

*/

export function isIphoneX() {

return (

Platform.OS === 'ios' &&

((SCREEN_HEIGHT === X_HEIGHT && SCREEN_WIDTH === X_WIDTH) ||

(SCREEN_HEIGHT === X_WIDTH && SCREEN_WIDTH === X_HEIGHT))

)

}

// 字体大小缩放比例

var fontScale = PixelRatio.getFontScale();

// 设备像素密度

export var pixelRatio = PixelRatio.get();

/*

设计图标准 750 * 1334

*/

const w2 = 750 / 2;

const h2 = 1334 / 2;

/**

* 设置text为sp

* @param size sp

* @returns size

*/

export const DEFAULT_DENSITY = 2;

export function setSpText(size) {

var scaleWidth = SCREEN_WIDTH / w2;

var scaleHeight = SCREEN_HEIGHT / h2;

var scale = Math.min(scaleWidth, scaleHeight);

size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);

return size / PixelRatio.get();

}

/**

* 屏幕适配,缩放size

* @param size

* @returns size

* @constructor

*/

export function scaleSize(size) {

var scaleWidth = SCREEN_WIDTH / w2;

var scaleHeight = SCREEN_HEIGHT / h2;

var scale = Math.min(scaleWidth, scaleHeight);

size = Math.round((size * scale + 0.5));

return size;

}

/*

导出URL 可以用

export const baseURLVersion = '';

*/

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。