Kích thước phông chữ trên iPhone 6s cộng với

Question

Khi tôi đang thử nghiệm ứng dụng iOs/React Native đầu tiên trong XCode/Simulators và trên thiết bị iPad cũ, ứng dụng có vẻ tốt, kích thước đều ổn. Nhưng trên một thiết bị iPhone 6s mới, tất cả mọi thứ là siêu nhỏ, văn bản, lề, paddings là như hai lần ít hơn họ nên được. Đó có phải là vấn đề đáp ứng không? Tôi có giả sử sử dụng API PixelRatio và nó sẽ giải quyết mọi thứ? Nó vẫn hoạt động bình thường sau khi tôi sẽ chuyển ứng dụng của tôi trên Android? Và điều đó có nghĩa rằng bây giờ tất cả các phong cách của tôi, tôi sẽ cần phải viết như:

var myStyle = { 
    Post: { 
    width: PixelRatio.getPixelSizeForLayoutSize(200), 
    margin: PixelRatio.getPixelSizeForLayoutSize(100), 
    } 
} 

thay vì chỉ:

var myStyle = { 
    Post: { 
    width: 200, 
    margin: 100, 
    } 
} 

?

Answer 1

Câu trả lời ngắn gọn là có, bạn sẽ phải chịu yếu tố phản hồi cho tất cả các phông chữ của mình. Có một vài phương pháp mà tôi đã sử dụng.

Như bạn đã đề cập, bạn có thể sử dụng getPixelSizeForLayoutSize. getPixelSizeForLayoutSize về cơ bản trông như thế này dưới mui xe:

static getPixelSizeForLayoutSize(layoutSize: number): number { 
    return Math.round(layoutSize * PixelRatio.get()); 
} 

Vấn đề với đó là PixelRatio.get sẽ trở lại các giá trị sau:

* PixelRatio.get() === 1 
    *  - mdpi Android devices (160 dpi) 
    * - PixelRatio.get() === 1.5 
    *  - hdpi Android devices (240 dpi) 
    * - PixelRatio.get() === 2 
    *  - iPhone 4, 4S 
    *  - iPhone 5, 5c, 5s 
    *  - iPhone 6 
    *  - xhdpi Android devices (320 dpi) 
    * - PixelRatio.get() === 3 
    *  - iPhone 6 plus 
    *  - xxhdpi Android devices (480 dpi) 
    * - PixelRatio.get() === 3.5 
    *  - Nexus 6 

Đó cơ bản có nghĩa là nó sẽ trả lại thông qua trong số * 2 trên iPhone6 ​​và * 3 trên iPhone6 ​​Plus, thường không có quy mô chính xác vì kích thước phông chữ iPhone6Plus kết thúc quá lớn. IPhone6 ​​và iPhone4 cũng sẽ nhận được điều trị tương tự, không phải là tối ưu.

Những gì chúng tôi đã thực hiện để khắc phục điều này là viết chức năng trợ giúp tính toán chiều cao của thiết bị và trả về kích thước.

Trong khi thực hiện này chính xác có thể không được chính xác những gì bạn muốn, một số biến thể của những điều sau đây sẽ có thể giải quyết việc này cho bạn vì nó dành cho chúng ta:

var React = require('react-native') 
var { 
    Dimensions 
} = React 

var deviceHeight = Dimensions.get('window').height; 

export default (size) => { 
    if(deviceHeight === 568) { 
     return size 
    } else if(deviceHeight === 667) { 
     return size * 1.2 
    } else if(deviceHeight === 736) { 
     return size * 1.4 
    } 
    return size 
} 

Sau đó sử dụng nó như thế này:

var normalize = require('./pathtohelper') 

fontSize: normalize(14), 
borderWidth: normalize(1) 

Dưới đây là một cách khác, dựa trên việc thực hiện ban đầu của getPizelRatioForLayoutSize. Vấn đề duy nhất là bạn vẫn đang nhận được các giá trị iPhone6 ​​và iPhone4 trở giống nhau, vì vậy nó là một chút ít chính xác, nhưng hoạt động tốt hơn so với nguồn gốc getPizelRatioForLayoutSize:

var React = require('react-native') 
var { 
    PixelRatio 
} = React 

var pixelRatio = PixelRatio.get() 

export default (size) => { 
    if(pixelRatio == 2) { 
     return size 
    } 
    return size * 1.15 
} 

Sau đó sử dụng nó như thế này:

var normalize = require('./pathtohelper') 

fontSize: normalize(14), 
borderWidth: normalize(1)