Bootstrap на мобильном устройстве (не рендеринг вызывает проблемы с зависанием) - PullRequest
0 голосов
/ 08 января 2020

Мне интересно, в чем проблема с этой страницей https://jsfiddle.net/3r2eo617/1/

<code><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="">

    <title>Demo</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>

</head>

<body>

    <main role="main" class="container">

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="card">
            <div class="card-header bg-primary text-white">Record</div>
            <div class="row">
                <div class="card-body">
                    <div class="container">
                        <b>Filename</b><br>acc.dat<br><br>
                        <b>Time Step</b><br>0.02 s<br><br>
                        <b>No Points</b><br>2400
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-8">
        <div class="form-group">
            <div id="highchart" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
        </div>
        <div class="form-group">
            <div id="highchart2" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
        </div>
        <div class="form-group">
            <div id="highchart3" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
        </div>
    </div>
</div>
<pre id="csv_acc" style="display:none">Time,Acceleration
        0.000,0.0000
        0.020,0.0000
        0.040,0.0000
        0.060,0.0000
        0.080,0.0000
        0.100,0.0000
        0.120,0.0000
        0.140,0.0000
        0.160,0.0000
        0.180,0.0000
        0.200,0.0000
        0.220,0.0000
        0.240,0.0000
        0.260,0.0000
        0.280,0.0000
        0.300,0.0000
        0.320,0.0000
        0.340,0.0000
        0.360,0.0000
        0.380,0.0000
        0.400,0.0000
        0.420,0.0000
        0.440,0.0000
        0.460,0.0000
        0.480,0.0000
        0.500,0.0000
        0.520,0.0000
        0.540,0.0000
        0.560,0.0000
        0.580,0.0000
        0.600,0.0000
        0.620,0.0000
        0.640,0.0000
        0.660,0.0000
        0.680,0.0000
        0.700,0.0000
        0.720,0.0000
        0.740,0.0000
        0.760,0.0000
        0.780,0.0000
        0.800,0.0000
        0.820,0.0000
        0.840,0.0000
        0.860,0.0000
        0.880,0.0000
        0.900,0.0000
        0.920,0.0000
        0.940,0.0000
        0.960,0.0000
        0.980,0.0000
        1.000,0.0000
        1.020,0.0000
        1.040,0.0000
        1.060,0.0000
        1.080,0.0000
        1.100,0.0000
        1.120,0.0000
        1.140,0.0000
        1.160,0.0000
        1.180,0.0000
        1.200,0.0000
        1.220,0.0000
        1.240,0.0000
        1.260,0.0000
        1.280,0.0000
        1.300,0.0000
        1.320,0.0000
        1.340,0.0000
        1.360,0.0000
        1.380,0.0000
        1.400,0.0000
        1.420,0.0000
        1.440,0.0000
        1.460,0.0000
        1.480,0.0000
        1.500,0.0000
        1.520,0.0000
        1.540,0.0000
        1.560,0.0000
        1.580,0.0000
        1.600,0.0000
        1.620,0.0000
        1.640,0.0000
        1.660,0.0000
        1.680,0.0000
        1.700,0.0000
        1.720,0.0000
        1.740,0.0000
        1.760,0.0000
        1.780,0.0000
        1.800,0.0000
        1.820,0.0000
        1.840,0.0000
        1.860,0.0000
        1.880,0.0000
        1.900,0.0000
        1.920,0.0000
        1.940,0.0000
        1.960,0.0000
        1.980,0.0000
        2.000,0.0000
        2.020,0.0000
        2.040,0.0000
        2.060,0.0000
        2.080,0.0000
        2.100,0.0000
        2.120,0.0000
        2.140,0.0000
        2.160,0.0000
        2.180,0.0000
        2.200,0.0000
        2.220,0.0000
        2.240,0.0000
        2.260,0.0000
        2.280,0.0000
        2.300,0.0000
        2.320,-0.0000
        2.340,-0.0000
        2.360,-0.0000
        2.380,-0.0000
        2.400,-0.0000
        2.420,-0.0000
        2.440,-0.0000
        2.460,0.0000
        2.480,0.0000
        2.500,0.0000
        2.520,0.0000
        2.540,0.0000
        2.560,0.0000
        2.580,0.0000
        2.600,-0.0000
        2.620,-0.0000
        2.640,-0.0000
        2.660,-0.0000
        2.680,-0.0000
        2.700,-0.0000
        2.720,-0.0000
        2.740,0.0000
        2.760,0.0000
        2.780,0.0000
        2.800,0.0000
        2.820,0.0000
        2.840,0.0000
        2.860,0.0000
        2.880,0.0000
        2.900,-0.0000
        2.920,-0.0000
        2.940,-0.0000
        2.960,-0.0000
        2.980,-0.0000
        3.000,-0.0000
        3.020,-0.0000
        3.040,-0.0000
        3.060,0.0000
        3.080,0.0000
        3.100,0.0000
        3.120,0.0000
        3.140,0.0000
        3.160,0.0000
        3.180,0.0000
        3.200,0.0000
        3.220,0.0000
        3.240,0.0000
        3.260,0.0000
        3.280,0.0000
        3.300,-0.0000
        3.320,-0.0000
        3.340,-0.0000
        3.360,-0.0000
        3.380,-0.0000
        3.400,-0.0000
        3.420,-0.0000
        3.440,0.0000
        3.460,0.0000
        3.480,0.0000
        3.500,0.0000
        3.520,0.0000
        3.540,0.0000
        3.560,0.0000
        3.580,0.0000
        3.600,-0.0000
        3.620,-0.0000
        3.640,-0.0000
        3.660,-0.0000
        3.680,-0.0001
        3.700,-0.0002
        3.720,-0.0002
        3.740,-0.0002
        3.760,-0.0002
        3.780,-0.0001
        3.800,-0.0001
        3.820,-0.0001
        3.840,-0.0000
        3.860,-0.0002
        3.880,-0.0005
        3.900,-0.0008
        3.920,-0.0005
        3.940,-0.0004
        3.960,-0.0006
        3.980,-0.0002
        4.000,0.0005
        4.020,0.0005
        4.040,-0.0001
        4.060,-0.0011
        4.080,-0.0016
        4.100,-0.0009
        4.120,-0.0001
        4.140,-0.0004
        4.160,-0.0001
        4.180,0.0021
        4.200,0.0022
        4.220,-0.0012
        4.240,-0.0038
        4.260,-0.0033
        4.280,-0.0020
        4.300,-0.0023
        4.320,-0.0012
        4.340,0.0005
        4.360,0.0000
        4.380,-0.0025
        4.400,-0.0056
        4.420,-0.0031
        4.440,0.0023
        4.460,0.0036
        4.480,0.0034
        4.500,0.0066
        4.520,0.0094
        4.540,0.0056
        4.560,0.0045
        4.580,0.0026
        4.600,-0.0046
        4.620,-0.0077
        4.640,0.0004
        4.660,0.0105
        4.680,0.0014
        4.700,-0.0058
        4.720,0.0031
        4.740,0.0112
        4.760,0.0171
        4.780,0.0257
        4.800,0.0265
        4.820,0.0128
        4.840,0.0006
        4.860,-0.0034
        4.880,-0.0020
        4.900,0.0090
        4.920,0.0003
        4.940,-0.0323
        4.960,-0.0390
        4.980,-0.0281
        5.000,-0.0170

    
Время, скорость 0.000,0.0000 0.020,0.0000 0.040,0.0001 0.060,0.0001 0.080,0.0001 0.100,0.0002 0.120,0.0002 0.140,0.0002 0.160,0.0002 0.180,0.0003 0.200,0.0003 0.220,0.0003 0.240,0.0004 0.260,0.0004 0.280,0.0004 0.300,0.0004 0.320,0.0005 0.340,0.0005 0.360,0.0005 0.380,0.0005 0.400,0.0006 0.420,0.0006 0.440,0.0006 0.460,0.0007 0.480,0.0007 0.500,0.0007 0.520,0.0007 0.540,0.0008 0.560,0.0008 0.580,0.0008 0.600,0.0008 0.620,0.0009 0.640,0.0009 0.660,0.0009 0.680,0.0009 0.700,0.0009 0.720,0.0010 0.740,0.0010 0.760,0.0010 0.780,0.0010 0.800,0.0010 0.820,0.0011 0.840,0.0011 0.860,0.0011 0.880,0.0011 0.900,0.0012 0.920,0.0012 0.940,0.0012 0.960,0.0012 0.980,0.0012 1.000,0.0012 1.020,0.0013 1.040,0.0013 1.060,0.0013 1.080,0.0013 1.100,0.0013 1.120,0.0014 1.140,0.0014 1.160,0.0014 1.180,0.0014 1.200,0.0014 1.220,0.0015 1.240,0.0015 1.260,0.0015 1.280,0.0015 1.300,0.0015 1.320,0.0015 1.340,0.0015 1.360,0.0016 1.380,0.0016 1.400,0.0016 1.420,0.0016 1.440,0.0016 1.460,0.0016 1.480,0.0016 1.500,0.0017 1.520,0.0017 1.540,0.0017 1.560,0.0017 1.580,0.0017 1.600,0.0017 1.620,0.0017 1.640,0.0018 1.660,0.0018 1.680,0.0018 1.700,0.0018 1.720,0.0018 1.740,0.0018 1.760,0.0018 1.780,0.0018 1.800,0.0018 1.820,0.0019 1.840,0.0019 1.860,0.0019 1.880,0.0019 1.900,0.0019 1.920,0.0019 1.940,0.0019 1.960,0.0019 1.980,0.0019 2.000,0.0019 2.020,0.0019 2.040,0.0020 2.060,0.0020 2.080,0.0020 2.100,0.0020 2.120,0.0020 2.140,0.0020 2.160,0.0020 2.180,0.0020 2.200,0.0020 2.220,0.0020 2.240,0.0020 2.260,0.0020 2.280,0.0020 2.300,0.0021 2.320,0.0021 2.340,0.0021 2.360,0.0021 2.380,0.0021 2.400,0.0021 2.420,0.0021 2.440,0.0021 2.460,0.0021 2.480,0.0021 2.500,0.0021 2.520,0.0021 2.540,0.0021 2.560,0.0021 2.580,0.0021 2.600,0.0022 2.620,0.0021 2.640,0.0021 2.660,0.0021 2.680,0.0021 2.700,0.0021 2.720,0.0021 2.740,0.0021 2.760,0.0021 2.780,0.0022 2.800,0.0022 2.820,0.0022 2.840,0.0022 2.860,0.0022 2.880,0.0022 2.900,0.0022 2.920,0.0022 2.940,0.0022 2.960,0.0022 2.980,0.0022 3.000,0.0021 3.020,0.0021 3.040,0.0021 3.060,0.0021 3.080,0.0021 3.100,0.0021 3.120,0.0021 3.140,0.0021 3.160,0.0022 3.180,0.0022 3.200,0.0022 3.220,0.0022 3.240,0.0022 3.260,0.0022 3.280,0.0022 3.300,0.0022 3.320,0.0022 3.340,0.0022 3.360,0.0022 3.380,0.0021 3.400,0.0021 3.420,0.0021 3.440,0.0021 3.460,0.0021 3.480,0.0021 3.500,0.0021 3.520,0.0021 3.540,0.0022 3.560,0.0022 3.580,0.0022 3.600,0.0022 3.620,0.0022 3.640,0.0021 3,660,0,0021 3,680,0,0019 3,700,0,0016 3,720,0,0013 3,740,0,0009 3,760,0,0005 3,780,0,0003 3,800,0,0001 3,820, -0,0001 3,840, -0,0002 3,860, -0,0004 3,880, -0,0011 3,900, -0,0024 3,920, -0,0037 3,9 -0,0047 3,960, -0,0057 3,980, -0,0065 4,000, -0,0061 4,020, -0,0052 4,040, -0,0048 4,060, -0,0060 4,080, -0,0086 4,100, -0,0111 4,120, -0,0120 4,140, ​​-0,0124 4,160, -0,0129 4,180, -0,0109 4.200, -0.0065 4.220, -0.0055 4.240, -0.0104 4.260, -0.0175 4.280, -0.0228 4.300, -0.0270 4.320, -0.0305 4.340, -0.0312 4.360, -0.0307 4.380, -0.0332 4.400, -0.0413 4.420, -0.0500 4.440, -0,0508 4,460, -0,0449 4,480, -0,0379 4,500, -0,0279 4,520, -0,0118 4,540,0,0032 4,560,0,0133 4,580,0,0204 4,600,0,0185 4,620,0,0062 4,640, -0,0010 4,660,0,0098 4,680,0,0217 4,700 0,0173 4,720 0,0146 4,740 , 0.0289 4.760,0.0573 4.780,0.1001 4.800,0.1523 4.820,0.1916 4.840,0.2050 4.860,0.2021 4.880,0.1967 4.900,0.2037 4.920,0.2130 4.940,0.1809 4.960,0.1096 4.980,0.0426 5.000, -0.0024 Время, Displacement 0.000,0.0000 0.020,0.0000 0.040,0.0000 0.060,0.0000 0.080,0.0000 0.100,0.0000 0.120,0.0000 0.140,0.0000 0.160,0.0000 0.180,0.0000 0.200,0.0000 0.220,0.0000 0.240,0.0000 0.260,0.0001 0.280,0.0001 0.300,0.0001 0.320,0.0001 0.340,0.0001 0.360,0.0001 0.380,0.0001 0.400,0.0001 0.420,0.0001 0.440,0.0001 0.460,0.0002 0.480,0.0002 0.500,0.0002 0.520,0.0002 0.540,0.0002 0.560,0.0002 0.580,0.0002 0.600,0.0003 0.620,0.0003 0.640,0.0003 0.660,0.0003 0.680,0.0003 0.700,0.0003 0.720,0.0004 0.740,0.0004 0.760,0.0004 0.780,0.0004 0.800,0.0004 0.820,0.0005 0.840,0.0005 0.860,0.0005 0.880,0.0005 0.900,0.0006 0.920,0.0006 0.940,0.0006 0.960,0.0006 0.980,0.0007 1.000,0.0007 1.020,0.0007 1.040,0.0007 1.060,0.0008 1.080,0.0008 1.100,0.0008 1.120,0.0008 1.140,0.0009 1.160,0.0009 1.180,0.0009 1.200,0.0009 1.220,0.0010 1.240,0.0010 1.260,0.0010 1.280,0.0011 1.300,0.0011 1.320,0.0011 1.340,0.0012 1.360,0.0012 1.380,0.0012 1.400,0.0012 1.420,0.0013 1.440,0.0013 1.460,0.0013 1.480,0.0014 1.500,0.0014 1.520,0.0014 1.540,0.0015 1.560,0.0015 1.580,0.0015 1.600,0.0016 1.620,0.0016 1.640,0.0016 1.660,0.0017 1.680,0.0017 1.700,0.0018 1.720,0.0018 1.740,0.0018 1.760,0.0019 1.780,0.0019 1.800,0.0019 1.820,0.0020 1.840,0.0020 1.860,0.0020 1.880,0.0021 1.900,0.0021 1.920,0.0022 1.940,0.0022 1.960,0.0022 1.980,0.0023 2.000,0.0023 2.020,0.0024 2.040,0.0024 2.060,0.0024 2.080,0.0025 2.100,0.0025 2.120,0.0026 2.140,0.0026 2.160,0.0026 2.180,0.0027 2.200,0.0027 2.220,0.0028 2.240,0.0028 2.260,0.0028 2.280,0.0029 2.300,0.0029 2.320,0.0030 2,340,0,0030 2,360,0,0030 2,380,0,0031 2,400,0,0031 2,420,0,0032 2,440,0,0032 2,460,0,0033 2,480,0,0033 2,500,0,0033 2,520,0,0034 2,540,0,0034 2,560,0,0035 2,580,0,0035 2,600,0,0035 2,620,0,0036 2,640,0,0036 2,660, 0,0037 2,680,0,0037 2,700,0,0038 2,720,0,0038 2,740,0,0038 2,760,0,0039 2,780,0,0039 2,800,0,0040 2,820,0,0040 2,840,0,0041 2,860,0,0041 2,880,0,0042 2,900,0,0042 2,920,0,0042 2,940,0,0043 2,960,00,00 2,980,044 , 0,0044 3,020,0,0045 3,040,0,0045 3,060,0,0045 3,080,0,0046 3,100,0,0046 3,120,0,0047 3,140,0,0047 3,160,0,0048 3,180,0,0048 3,200,00,00 3,220,0,0049 3,240,0,0049 3,260,0,0050 3,280,0,0050 3,300,0,0051 3,320,0,0051 3,340,0,0051 3,360,0,0052 3,30,0,0052 3,400,0,0053 3,420,0,0053 3,440,0,0054 3,460,0,0054 3,480,0,0054 3,500,0,0055 3,520,0,0055 3,540,0,0056 3,560,0,0056 3,580,0,0057 3,600,0,0057 3,620,0,0057 3,640,0,0058 3,660, 0,0058 3,680,0,0059 3,700,0,0059 3,720,0,0059 3,740,0,0060 3,760,0,0060 3,780,0,0060 3,800,0,0060 3,820,0,0060 3,840,0,0060 3.880,0.0060 3.900,0.0059 3.920,0.0059 3.940,0.0058 3.960,0.0057 3.980,0.0056 4.000,0.0054 4.020,0.0053 4.040,0.0052 4.060,0.0051 4.080,0.0050 4.100,0.0048 4.120,0.0045 4.140,0.0043 4.160,0.0040 4.180,0.0038 4.200, 0,0036 4,220,0,0035 4,240,0,0033 4,260,0,0031 4,280,0,0027 4,300,0,0022 4,320,0,0016 4,340,0,0010 4,360,0,0004 4,380, -0,0003 4,400, -0,0010 4,420, -0,0019 4,440, -0,0030 4,460, -0,0039 4,480, -0,0047 4,500 , -0,0054 4,520, -0,0058 4,540, -0,0059 4,560, -0,0057 4,580, -0,0054 4,600, -0,0050 4,620, -0,0047 4,640, -0,0047 4,660, -0,0046 4,680, -0,0043 4,700, -0,0039 4,720, -0,0036 4,740, - 0.0031 4.760, -0.0023 4.780, -0.0007 4.800,0.0018 4.820,0.0053 4.840,0.0092 4.860,0.0133 4.880,0.0173 4.900,0.0213 4.920,0.0255 4.940,0.0294 4.960,0.0323 4.980,0.0338 5.000,0.0342 1009 * zoomType: 'xy',}, title: {text: ''}, data: {boostThreshold: 1, csv: document.getElementById ('csv_dis'). innerHTML}, yAxis: {title: {text: "Смещение [см ] ",}}}); });

при просмотре с мобильного устройства, хотя его можно правильно просматривать на настольных устройствах. В частности, на мобильных устройствах, работающих под управлением Android ОС, в последних версиях браузеров Chrome / Brave / Vivaldi всегда возникает «не отвечающий признак».

Может кто-нибудь подсказать мне, как правильно обращаться к этой странице через мобильные устройства без Проблемы с зависанием?

Заранее спасибо!

PS. Та же проблема существует при просмотре этой демонстрации https://www.highcharts.com/demo/line-time-series с мобильного устройства, но не для других демонстраций.

1 Ответ

0 голосов
/ 09 января 2020

Я вижу, что вы пытались применить модуль boost, установив для свойства boostThreshold значение 1. Вы были близки, в этом случае модуль boost решит проблему. Хотя, чтобы заставить его работать, вам нужно сделать две вещи - сначала вам нужно импортировать модуль boost, затем вы должны применить boostThreshold в другом месте, например в plotOptions.line.boostThreshold или в series.boostThreshold, потому что вы не можете получить к нему доступ. собственность из того места, где вы пытались его применить (данные). После исправления этих двух вещей все работает на моем android устройстве.

<script src="https://code.highcharts.com/modules/boost.js"></script>

plotOptions: {
       line: {
         boostThreshold: 1
       }
     },

Ссылки на документы: https://www.highcharts.com/docs/advanced-chart-features/boost-module

Ссылки API: https://api.highcharts.com/highcharts/plotOptions.line.boostThreshold

Демонстрационная версия: https://jsfiddle.net/BlackLabel/q9805pv4/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...