Home / Questions / 199442
Accepted
Fernanda
Asked: 2020-09-26 13:01:32 +0800 CST 2020-09-26 13:01:32 +0800 CST

如何根据屏幕大小执行不同的功能

  • 772

我的菜单有问题，因为当它缩小到小屏幕尺寸时，我在 js 中放置了一个函数，以便在选择所需部分时它会自动关闭以改善用户体验。

html

<div id="cardMenu">
            <figure id="hideMenu" class="ioMenuMovil exit" onClick="displayMenu()"></figure>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li id="diseño"><a href="diseño_Grafico.html">DISEÑO GRAFICO</a></li>
                <li id="bolsas"><a href="bolsas_de_papel.html">BOLSAS IMPRESAS</a></li>
                <li id="carteleria"><a href="carteleria.html">CARTELERIA</a></li>
                <li id="cYE" onClick="displayCyE()"><a href="#">CUMPLES Y EVENTOS</a>
                    <ul id="subMenuCyE">
                        <li>Diseños personalizados de</li>
                        <li><a href="cumples_y_eventos.html#souvenirs">SOUVENIRS</a></li>
                        <li><a href="cumples_y_eventos.html#tarjetas">TARJETAS </a></li>
                        <li><a href="cumples_y_eventos.html#pins">PINS</a></li>
                        <li><a href="cumples_y_eventos.html#banderines">BANDERINES</a></li>
                        <li><a href="cumples_y_eventos.html#mesas">MESAS DULCES</a></li>
                        <li><a href="cumples_y_eventos.html#bolcita">BOLCITAS PARA CARAMELOS</a></li>
                        <li><a class="ultimo" href="cumples_y_eventos.html#bolcita">CAJITAS</a></li>
                    </ul>
                </li>
                <li id="otrosServicios" onClick="displayOs()"><a href="#">OTROS SERVICIOS</a>
                    <ul id="subMenuOS">
                        <li><a href="otros_servicios.html#papeleria">PAPELERIA COMERCIAL</a></li>
                        <li><a href="otros_servicios.html#redes">MANEJO DE REDES</a></li>                           
                        <li><a href="otros_servicios.html#web">DISEÑO WEB</a></li>
                        <li><a href="otros_servicios.html#estampado">ESTAMPADOS Y BORDADOS</a></li>
                        <li><a href="otros_servicios.html#sublimacion">SUBLIMACION</a></li>
                        <li><a href="otros_servicios.html#pins">PINS PUBLICITARIOS</a></li>
                        <li><a href="otros_servicios.html#impresion">IMPRESION FOTOGRAFICA</a></li>
                        <li><a class="ultimo" href="otros_servicios.html#tarjetas">TARJETAS Y SOUVENIRS</a></li>
                    </ul>
                </li>
                <li id="contacto"><a onClick="displayFormContact('block')">CONTACTO</a></li>
            </ul>
        </div>

javascript函数

function displayFormContact(status){
var form = document.getElementById("contact_form")
form.style.display = status;


document.getElementById("cardMenu").style.display = "none";  //////////*CIERRA MENU AL SELECCIONAR LA SECCION*/
}

我遇到了菜单显示在顶部的最大尺寸的问题（一如既往）。When I select a section everything is fine, but when selecting the contact form (which appears in the same section I am in, without directing to another section) the menu disappears due to the function it has (necessary in small screen sizes)

如何根据用户的屏幕尺寸激活或停用此功能。

要查看菜单工作和实时问题，请输入

www.graficaelpunto.com/web

谢谢

javascript

2 Answers

  1. Best Answer

    我编写了一些代码，以便您可以指导自己如何检测窗口的宽度以及它如何与各种功能进行交互，除了我为窗口对象创建了一个调整大小事件，以便您可以测试它何时改变分辨率它如何调用其他函数：

    var anchoVentana = window.innerWidth

const funcion1 = () => {
  alert("funcion1");
}

const funcion2 = () => {
  alert("funcion2");
}

const funcion3 = () => {
  alert("funcion3");
}

window.onresize = function(){

 anchoVentana = window.innerWidth;
 console.log(anchoVentana)

};

if(anchoVentana > 1000){
  funcion1();
}else if(anchoVentana > 750 && anchoVentana < 1000){
  funcion2();
}else{
  funcion3();
}

    如果你看，我用window.innerWidth得到窗口的宽度，然后我根据我或你的标准评估它，调用哪个函数，ifs在哪里，你放置或考虑你要调用的分辨率一个或另一个功能。

    • 1

  2. 如果有人遇到同样的问题，下面是 javascript 函数的外观。

    var anchoVentana = window.innerWidth

function displayFormContact(status){

    if(anchoVentana < 600){
        var form = document.getElementById("contact_form")
        form.style.display = status;

        document.getElementById("cardMenu").style.display = "none";  //////////*CIERRA MENU AL SELECCIONAR LA SECCION*/

    } else{
        var form = document.getElementById("contact_form")
        form.style.display = status;
    }
}

    非常感谢大卫莫利纳的指导

    • 0