| 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 |
|
| 11 | const React = require('react-native'); // eslint-disable-line no-undef
|
| 12 | const { PixelRatio, Dimensions } = React;
|
| 13 |
|
| 14 | const pixelRatio = PixelRatio.get();
|
| 15 | const deviceHeight = Dimensions.get('window').height;
|
| 16 | const deviceWidth = Dimensions.get('window').width;
|
| 17 |
|
| 18 | // -- Testing Only --
|
| 19 | // const fontScale = PixelRatio.getFontScale();
|
| 20 | // const layoutSize = PixelRatio.getPixelSizeForLayoutSize(14);
|
| 21 | // console.log('normalizeText getPR ->', pixelRatio);
|
| 22 | // console.log('normalizeText getFS ->', fontScale);
|
| 23 | // console.log('normalizeText getDH ->', deviceHeight);
|
| 24 | // console.log('normalizeText getDW ->', deviceWidth);
|
| 25 | // console.log('normalizeText getPSFLS ->', layoutSize);
|
| 26 |
|
| 27 | const font = size => {
|
| 28 | if (pixelRatio === 2) {
|
| 29 | // iphone 5s and older Androids
|
| 30 | if (deviceWidth < 360) {
|
| 31 | return size * 0.95;
|
| 32 | }
|
| 33 | // iphone 5
|
| 34 | if (deviceHeight < 667) {
|
| 35 | return size;
|
| 36 | // iphone 6-6s
|
| 37 | } else if (deviceHeight >= 667 && deviceHeight <= 735) {
|
| 38 | return size * 1.15;
|
| 39 | }
|
| 40 | // older phablets
|
| 41 | return size * 1.25;
|
| 42 | }
|
| 43 | if (pixelRatio === 3) {
|
| 44 | // catch Android font scaling on small machines
|
| 45 | // where pixel ratio / font scale ratio => 3:3
|
| 46 | if (deviceWidth <= 360) {
|
| 47 | return size;
|
| 48 | }
|
| 49 | // Catch other weird android width sizings
|
| 50 | if (deviceHeight < 667) {
|
| 51 | return size * 1.15;
|
| 52 | // catch in-between size Androids and scale font up
|
| 53 | // a tad but not too much
|
| 54 | }
|
| 55 | if (deviceHeight >= 667 && deviceHeight <= 735) {
|
| 56 | return size * 1.2;
|
| 57 | }
|
| 58 | // catch larger devices
|
| 59 | // ie iphone 6s plus / 7 plus / mi note 等等
|
| 60 | return size * 1.27;
|
| 61 | }
|
| 62 | if (pixelRatio === 3.5) {
|
| 63 | // catch Android font scaling on small machines
|
| 64 | // where pixel ratio / font scale ratio => 3:3
|
| 65 | if (deviceWidth <= 360) {
|
| 66 | return size;
|
| 67 | // Catch other smaller android height sizings
|
| 68 | }
|
| 69 | if (deviceHeight < 667) {
|
| 70 | return size * 1.20;
|
| 71 | // catch in-between size Androids and scale font up
|
| 72 | // a tad but not too much
|
| 73 | }
|
| 74 | if (deviceHeight >= 667 && deviceHeight <= 735) {
|
| 75 | return size * 1.25;
|
| 76 | }
|
| 77 | // catch larger phablet devices
|
| 78 | return size * 1.40;
|
| 79 | }
|
| 80 | // if older device ie pixelRatio !== 2 || 3 || 3.5
|
| 81 | return size;
|
| 82 | };
|
| 83 |
|
| 84 | export default font; // eslint-disable-line no-undef
|