该代码在桌面浏览器中时在移动设备中无响应

问题描述 投票:0回答:1

在我的页面中:https://rafiee.net/q,我有以下html代码(Link to webpage)

 <title>Normal Distribution Applet/Calculator</title>

<meta name="viewport" content="width=device-width">

<link rel="shortcut icon" href="../favicon.png" type="image/png" />

<link type="text/css" rel="stylesheet" href="/wp-content/themes/astra-child/css/style.css">

<script src="/wp-content/themes/astra-child/js/common.js"></script>
<script src="/wp-content/themes/astra-child/js/jstat.min.js"></script>
<script src="/wp-content/themes/astra-child/js/normaldist.object.js"></script>

<script src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"]}]}'>
</script>

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
//MathJax.Hub.Config({
//  "HTML-CSS": {
//    availableFonts: [], preferredFont: null, // force Web fonts
//    webFont: "STIX-Web"
//  }
//});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML.js">
</script>

<script src="/wp-content/themes/astra-child/js/jquery.js"></script>
<script src="/wp-content/themes/astra-child/js/jquery.tools.min.js"></script>


<script>

// Help Panel
$(document).ready(function(){
  $("#flip1").click(function(){
    $("#panel1").slideToggle("fast");
  });
});


// Tooltip
$(function() {
$("#bulb img[title]").tooltip({
   offset: [0, 120],
   effect: 'fade'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});


// Google Analytics
var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-110195266-1']);
    _gaq.push(['_trackPageview']);

(function() 
{
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + 
    '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
}
)();


// Load the Visualization API
google.charts.load("current", {packages:["corechart"]});


$(document).ready(function(){
$("input").change(function(){
//alert("The text has been changed.");
});
});

</script>

</head>



<body onload="
    norm = new normalDistribution(0,1);
    norm.printPdf('','less'); 
    norm.printMoments();">

<h3>Normal Distribution<br>$X \sim N(\mu, \sigma)$</h3>

<div id="resp-table">
<form NAME="this.form">
  <table class="responsive-table">
    <tr>
        <td>$\mu=$</td>
        <td><input TYPE="TEXT" NAME="mu" 
            VALUE="0"
            ONFOCUS="this.form.x.value = '';
                this.form.p.value = '';"
            ONCHANGE="
                if(isNaN(this.form.mu.value))
                {
                    alert('Error: Enter a numeric value');
                    this.form.mu.value = '';
                }
                else
                {
                    norm = new normalDistribution(this.form.mu.value, this.form.si.value);
                    if(!isNaN(this.form.si.value))
                    {
                        norm.printPdf(this.form.x.value,this.form.mydropdown.value); 
                        norm.printMoments();
                    };
                };
                if(this.form.mu.value != 0) {
                    mydropdown.options.remove(2);
                    mydropdown.options.remove(2);
                }
                if(this.form.mu.value == 0) {
                    mydropdown.options[2] = new Option('2P(X&thinsp;&#62;&thinsp;|x|)&thinsp;=', 'twotail');
                    mydropdown.options[3] = new Option('P(-|x|&thinsp;&#60;&thinsp;X&thinsp;&#60;&thinsp;|x|)&thinsp;=', 'twotailinside');
                }"


        ></td>

        <td>$\sigma=$</td>
        <td><input TYPE="TEXT" NAME="si" 
            VALUE="1"
            ONFOCUS="this.form.x.value = '';
                this.form.p.value = '';"
            ONCHANGE="
                if(isNaN(this.form.si.value))
                {
                    alert('Error: Enter a sigma value > 0');
                    this.form.si.value = '';
                }
                else if(eval(this.form.si.value) <= 0)
                {
                    alert('Error: Enter a sigma value > 0');
                }
                else
                {
                    norm = new normalDistribution(this.form.mu.value, this.form.si.value);
                    if(!isNaN(this.form.mu.value)) 
                    {
                        norm.printPdf(this.form.x.value, this.form.mydropdown.value); 
                        norm.printMoments();
                    };
                };"
        ></td>


    </tr>

    <tr>
        <td>$x=$</td>

        <td><input TYPE="text" NAME="x" 
        VALUE=""
        ONCLICK="this.form.p.value=''"
        ONCHANGE="
            if(isNaN(this.form.x.value))
            {
                alert('Error: Enter a numeric value');
            }
            else
            {
                norm = new normalDistribution(this.form.mu.value, this.form.si.value);
                norm.printPdf(this.form.x.value, this.form.mydropdown.value);
                if(this.form.mydropdown.value == 'less') 
                    this.form.p.value = roundNumber(norm.cdf(this.form.x.value),5);
                if(this.form.mydropdown.value == 'greater') 
                    this.form.p.value = roundNumber(1-norm.cdf(this.form.x.value),5);
                if(this.form.mydropdown.value == 'twotail')
                    if(this.form.x.value >= 0) 
                        this.form.p.value = 2*roundNumber(norm.cdf(-this.form.x.value),5);
                    else
                        this.form.p.value = 2*roundNumber(norm.cdf(this.form.x.value),5);
                if(this.form.mydropdown.value == 'twotailinside')
                        this.form.p.value = 1-2*roundNumber(norm.cdf(-Math.abs(this.form.x.value)),5);
            }
            if(this.form.x.value == '') {
                this.form.p.value = '';
            }
            ;"
        STYLE="background-color: #b2caf6"></td>

        <td><select name="mydropdown" 
        ONCHANGE="this.form.p.value = ''; 
            norm = new normalDistribution(this.form.mu.value, this.form.si.value);
            norm.printPdf(this.form.x.value, this.form.mydropdown.value);
            if(this.form.mydropdown.value == 'less') 
                this.form.p.value = roundNumber(norm.cdf(this.form.x.value),5);
            if(this.form.mydropdown.value == 'greater') 
                this.form.p.value = roundNumber(1-norm.cdf(this.form.x.value),5);
            if(this.form.mydropdown.value == 'twotail')
                if(this.form.x.value >= 0) 
                    this.form.p.value = 2*roundNumber(norm.cdf(-this.form.x.value),5);
                else
                    this.form.p.value = 2*roundNumber(norm.cdf(this.form.x.value),5);
            if(this.form.mydropdown.value == 'twotailinside')
                this.form.p.value = 1-2*roundNumber(norm.cdf(-Math.abs(this.form.x.value)),5);
            if(this.form.x.value == '') {
                this.form.p.value = '';
            }">
        <option value="greater">P(X&thinsp;&#62;&thinsp;x)&thinsp;=</option>
        <option value="less">P(X&thinsp;&#60;&thinsp;x)&thinsp;=</option>
        <option value="twotail">2P(X&thinsp;&#62;&thinsp;|x|)&thinsp;=</option>
        <option value="twotailinside">P(-|x|&thinsp;&#60;&thinsp;X&thinsp;&#60;&thinsp;|x|)&thinsp;=</option>
        </select></td>

        <td><input TYPE="TEXT" NAME="p" 
        VALUE=""
        ONCLICK="this.form.x.value=''"
        ONCHANGE="
            if((this.form.p.value<=0) || (this.form.p.value>=1) || isNaN(this.form.p.value)) 
            {
                alert('Error: Probability must be between 0 and 1'); 
                this.form.p.value = ''
            }
            else 
            {
                norm = new normalDistribution(this.form.mu.value, this.form.si.value);
                if(this.form.mydropdown.value == 'less') 
                    this.form.x.value = roundNumber(norm.percentile(this.form.p.value),5);
                if(this.form.mydropdown.value == 'greater') 
                    this.form.x.value = roundNumber(norm.percentile(1-this.form.p.value),5);
                if(this.form.mydropdown.value == 'twotail') 
                    this.form.x.value = -roundNumber(norm.percentile(0.5*this.form.p.value),5);
                if(this.form.mydropdown.value == 'twotailinside') 
                    this.form.x.value = -roundNumber(norm.percentile(0.5*(1-this.form.p.value)),5);
                norm.printPdf(this.form.x.value, this.form.mydropdown.value);
            };" 
        STYLE="background-color: #e7b0b0"></td>

    </tr>
  </table>
</form>
</div>


<div id="pdfPlot"></div>


<div>
<p id="moments" class="mathjaxMoments"></p>
</div>



<footer>
<div id="footerleft">
<div id="flip1"><button>Help</button></div>
</div>
<div id="footerright">
<p class='small'>
&copy;2019 Rafiee.net<br>
<br>
</p>
</div>
</footer>



<div id="panel1">
<p>
This applet computes probabilities and percentiles for normal random variables:
$$X \sim N(\mu, \sigma)$$
</p>

<h4>Directions</h4>
<ul>
<li>Enter the mean $\mu$ and standard deviation $\sigma$. </li>
<li>To compute a left-tail probability, select $P(X \lt x)$ from the drop-down box, 
enter a numeric $x$ value in the <span style="BACKGROUND-COLOR: #BABAFF">blue</span>
box and press "Tab" or "Enter" on your keyboard. The probability $P(X \lt x)$ will appear in the
<span style="BACKGROUND-COLOR: #FFCCCC">pink</span> box.
Select $P(X \gt x)$ from the drop-down box for a right-tail probability.</li>
<li>To determine a percentile, enter the percentile (e.g. use 0.8 for the 80th percentile) in the 
<span style="BACKGROUND-COLOR: #FFCCCC">pink</span>
box, select $P(X \lt x)$ from the drop-down box, and press "Tab" or "Enter" on your keyboard. 
The percentile $x$ will appear in the <span style="BACKGROUND-COLOR: #BABAFF">blue</span> box.</li>
</ul>

<p>On the graph, the $x$ value appears in 
<span style="BACKGROUND-COLOR: #BABAFF">blue</span>
while the probability is shaded in 
<span style="BACKGROUND-COLOR: #FFCCCC">pink</span>.
</p>

<h4>Details</h4>
<ul>
<li>Probability density function
$$f(x)=\frac{1}{\sqrt{2\pi \sigma^2}} e^{-\frac{1}{2\sigma^2}(x-\mu)^2}$$
where $-\infty \lt x \lt \infty$, $-\infty \lt \mu \lt \infty$, and $\sigma \gt 0$</li>
<li>$\mu=E(X)$</li>
<li>$\sigma^2=Var(X)$</li>
<li>$\sigma=SD(X)$</li>
</ul>

</div>


</body>

并跟随Style.css:

/*@font-face { font-family: Roboto; src: url('fonts/Roboto-Regular.ttf'); font-weight:normal;}*/
/*@import url(http://fonts.googleapis.com/css?family=Roboto:400);*/

body {
    font-size:100%;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    background-image: url('../backgrounds/cream.png');
    }


@-viewport {
    zoom: auto;
}


body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    z-index: 100;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    }


input {
    border: 1px solid rgb(180,180,180); 
    border-radius: 2px;
    padding: 5px;
    background-color: rgb(240,240,240);
    margin: 2px 12px 0 0;
    width: 70px;
}


select {
    margin: 2px 0px 0 0;
}


.tooltip {
    font-size:12px;
    width:200px;
    padding:5px;
    margin-top: 40px;
    border: 1px solid rgb(180,180,180);
    border-radius: 3px;
    background-color: #e6e6fa;
    }


#bulb img {
    cursor:pointer;
    margin-left: -10px;
    }


img {
    margin: auto;
}


button {
background-color: #B2B2B2;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius:5px;
   border: #FFF;
   color: #FFF;
}


#flip1 {
    cursor: pointer;
    width: 0%;
    }


#panel1 {
    display:none;
    padding: 5px;
    border: solid 1px rgb(225,225,225);
    border-radius: 3px;
    background-color: rgba(0,0,0,0.02);
    }


table,td,th {
    text-align:right;
    margin: auto;
    }


h3 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    padding: 5px;
    text-align: center;
    background-color: rgba(0,0,0,0.02);
    border: solid 1px rgb(225,225,225);
    border-radius: 3px;
    }


p.mathjaxText {
    font-size:100%;
    text-align: left;
    }


p {
    color: black; 
    }


p.small {
    font-size:70%;
    font-family:sans-serif;
    color: grey;
    padding: 0px;
    margin-right: 5px;
    }


p.mathjaxMoments {
    font-size:70%;
    font-family:sans-serif;
    margin: auto;
    text-align: center;
    color: rgb(120,120,120);
    padding: 15px;
    }


p.mathjaxCenter {
    font-size:90%;
    font-family:courier;
    margin-bottom: 0px;
    text-align: center;
    color: rgb(120,120,120);
    }


p.mathjaxCI {
    font-size:90%;
    font-family:courier;
    text-align: center;
    color: rgb(120,120,120);
    }


div {
    padding:0px; 
    }


div#pmfPlot {
    margin-left: 20px;
    }


div#pdfPlot {
    margin-left: 20px;
    }


footer {
    background-color: rgba(0,0,0,0.02);
    border: solid 1px rgb(225,225,225);
    border-radius: 3px;
    display: block;
}


#footerleft {
    float: left;
    padding: 5px;
    }


#footerright {
    text-align: right;
    padding: 5px;
    }


ul {
    margin-top: -5px;
}


li {
    margin-bottom: 3px;
}

div#resp-table{
    width:100%;
    display: table;
}

@media only screen and (max-width: 768px) {
.responsive-table {
overflow: hidden;
overflow-x: scroll;
display:block;
}
}

我对此代码有三个问题,下面我将在下面列出这些问题:

  1. 表在桌面浏览器上时,在移动设备上无响应。我用谷歌搜索并尝试了很多建议,但是,我仍然无法在移动设备上做出响应。这是我的主要问题。

enter image description hereenter image description here

  1. 添加html后,我的页脚中有一个框,我不知道它来自哪里。 (我正在使用wordpress + elementor)

enter image description hereenter image description here

  1. 在我的所有页面中,我的菜单中都有登录按钮,但是,在上面的页面中我使用了代码。

enter image description hereenter image description here

  1. 移动菜单在此特定页面上也无法使用。

enter image description here

我先感谢您的帮助。谢谢

javascript html css wordpress responsive
1个回答
0
投票

因为使用display:table,宽度:100%被忽略。

© www.soinside.com 2019 - 2024. All rights reserved.