отзывчивый стиль не работает в разных устройствах

Question

Я пытаюсь адаптировать мой график к трем различным устройствам.Я создал правила iPad Pro (максимальная ширина 2048), iPad (максимальная ширина 1024) и мобильный (максимальная ширина 480), но он не рендерится должным образом.для iPad Pro - рендеринг для iPad, а для iPad - для мобильного.

responsive: {
            rules: [

                { 
                    condition: {
                        maxWidth:2048
                        }, 
                        chartOptions: {
                            series: [{
                                dataLabels: {
                                    style: {
                                        fontSize: '25px',
                                        color: 'red'
                                    },

                                }

                            },
                            {
                                dataLabels: {
                                    style: {
                                        fontSize: '15px',
                                    },

                                }

                            }
                        ]


                        }
                },
                {
                    condition: {
                       maxWidth: 1024
                    },
                    chartOptions: {
                        series: [{
                            dataLabels: {
                                style: {
                                    fontSize: '35px',
                                    color: 'green'
                                },

                            }

                        },
                        {
                            dataLabels: {
                                style: {
                                    fontSize: '8px',
                                },

                            }

                        }
                    ] 

                }
                }, 


            {
                condition: {
                   maxWidth: 480
                },
                chartOptions: {
                    series: [{
                        dataLabels: {
                            style: {
                                fontSize: '20px',
                            },

                        }

                    },
                    {
                        dataLabels: {
                            style: {
                                fontSize: '8px',
                            },

                        }

                    }
                ] 

            }
            }]
    } `

Answer 1

Заметили ли вы, что адаптивные правила, такие как maxWidth и minWidth, применяются к ширине диаграммы?Это не всегда равно ширине экрана.

Описание Highcharts API maxWidth:

Правило реагирования применяется, если ширина диаграммы меньше этой.

Так что ваш код, вероятно, работает правильно.Проверьте заголовок на нескольких экранах ширины в этом примере: https://jsfiddle.net/BlackLabel/3stawvum/.

  responsive: {
    rules: [{
      condition: {
        maxWidth: 2048,
        minWidth: 931
      },
      chartOptions: {
        title: {
          text: '2048 title'
        },
      }
    }, {
      condition: {
        maxWidth: 930,
        minWidth: 401
      },
      chartOptions: {
        title: {
          text: '1024 title'
        },
      }
    }, {
      condition: {
        maxWidth: 400
      },
      chartOptions: {
        title: {
          text: '480 title'
        },
      }
    }]
  }

Ссылка API:

• https://api.highcharts.com/highcharts/responsive.rules.condition.maxWidth