| 1 | //
|
| 2 | // Method to normalize size of fonts across devices
|
| 3 | //
|
| 4 | // Some code taken from https://jsfiddle.net/97ty7yjk/ &
|
| 5 | // https://stackoverflow.com/questions/34837342/font-size-on-iphone-6s-plus
|
| 6 | //
|
| 7 | // author: @xiaoneng
|
| 8 | // date: 14/10/2016
|
| 9 | // version: 03
|
| 10 | import { PixelRatio, Dimensions } from 'react-native';
|
| 11 | const pixelRatio = PixelRatio.get();
|
| 12 | const deviceHeight = Dimensions.get('window').height;
|
| 13 | const deviceWidth = Dimensions.get('window').width;
|
| 14 | // -- Testing Only --
|
| 15 | // const fontScale = PixelRatio.getFontScale();
|
| 16 | // const layoutSize = PixelRatio.getPixelSizeForLayoutSize(14);
|
| 17 | // console.log('normalizeText getPR ->', pixelRatio);
|
| 18 | // console.log('normalizeText getFS ->', fontScale);
|
| 19 | // console.log('normalizeText getDH ->', deviceHeight);
|
| 20 | // console.log('normalizeText getDW ->', deviceWidth);
|
| 21 | // console.log('normalizeText getPSFLS ->', layoutSize);
|
| 22 | const font = (size) => {
|
| 23 | if (pixelRatio === 2) {
|
| 24 | // iphone 5s and older Androids
|
| 25 | if (deviceWidth < 360) {
|
| 26 | return size * 0.95;
|
| 27 | }
|
| 28 | // iphone 5
|
| 29 | if (deviceHeight < 667) {
|
| 30 | return size;
|
| 31 | // iphone 6-6s
|
| 32 | }
|
| 33 | else if (deviceHeight >= 667 && deviceHeight <= 735) {
|
| 34 | return size * 1.15;
|
| 35 | }
|
| 36 | // older phablets
|
| 37 | return size * 1.25;
|
| 38 | }
|
| 39 | if (pixelRatio === 3) {
|
| 40 | // catch Android font scaling on small machines
|
| 41 | // where pixel ratio / font scale ratio => 3:3
|
| 42 | if (deviceWidth <= 360) {
|
| 43 | return size;
|
| 44 | }
|
| 45 | // Catch other weird android width sizings
|
| 46 | if (deviceHeight < 667) {
|
| 47 | return size * 1.15;
|
| 48 | // catch in-between size Androids and scale font up
|
| 49 | // a tad but not too much
|
| 50 | }
|
| 51 | if (deviceHeight >= 667 && deviceHeight <= 735) {
|
| 52 | return size * 1.2;
|
| 53 | }
|
| 54 | // catch larger devices
|
| 55 | // ie iphone 6s plus / 7 plus / mi note 等等
|
| 56 | return size * 1.27;
|
| 57 | }
|
| 58 | if (pixelRatio === 3.5) {
|
| 59 | // catch Android font scaling on small machines
|
| 60 | // where pixel ratio / font scale ratio => 3:3
|
| 61 | if (deviceWidth <= 360) {
|
| 62 | return size;
|
| 63 | // Catch other smaller android height sizings
|
| 64 | }
|
| 65 | if (deviceHeight < 667) {
|
| 66 | return size * 1.20;
|
| 67 | // catch in-between size Androids and scale font up
|
| 68 | // a tad but not too much
|
| 69 | }
|
| 70 | if (deviceHeight >= 667 && deviceHeight <= 735) {
|
| 71 | return size * 1.25;
|
| 72 | }
|
| 73 | // catch larger phablet devices
|
| 74 | return size * 1.40;
|
| 75 | }
|
| 76 | // if older device ie pixelRatio !== 2 || 3 || 3.5
|
| 77 | return size;
|
| 78 | };
|
| 79 | export default font; // eslint-disable-line no-undef
|
| 80 | //# sourceMappingURL=font.js.map |
| \ | No newline at end of file |