Отзывчивость на Chrome Телефон (клавиатура) + Телефон Safari испорчен - PullRequest
Новая
       215

Отзывчивость на Chrome Телефон (клавиатура) + Телефон Safari испорчен

0 голосов
/ 05 августа 2020

это мой временный сайт: http://op4rest.com.s3-website.us-east-2.amazonaws.com/

Я проверил свой сайт на реальных устройствах и обнаружил много проблем. Упоминание: почти все элементы позиционируются абсолютным образом, а размер окна просмотра изменен (Vh + vw);

1. Когда появляется клавиатура в Chrome Andriod , все мое окно просмотра разрушается.

Режим Safari Oriented (Телефон) - два элемента (по id) заканчиваются в разных позициях:

* firstPhone

* underLastPhone

*** нижняя серая область становится слишком непроптимой

Режим Safari LandSacpe (Телефон) : Все полностью уничтожено.

Я подумал, что если все будет настроено с помощью окон просмотра и изменен размер как абсолютный, он должен реагировать на каждый браузер, но думаю, я ошибаюсь.

Для клавиатуры я использовал этот скрипт, но он не t работа + уничтожение p c отзывчивость при увеличении и уменьшении. 

$(document).ready(function() {
    /* ... */
    var windowHeight = $(window).innerHeight();
    $('body').css({'height':windowHeight});
    /* ... */
});

А как насчет браузера сафари, что мне делать?

html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="mobile.css">
    <!--Styles Subs-->
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@500&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
    <div id="overflowPhone">
    <header>
        <a href="#robotPicture"><div id="buttonPhone"></div></a>
        <img id="firstLogo" src="./headerPictures/logoLeft.png" alt="Logo">
        <p id="logoSub">Order & Pay</p>

        <div id="icons">
            <img src="./headerPictures/phoneIcon.png" alt="What'sapp Icon">
            <img src="./headerPictures/linkedinIcon.png" alt="Linkedin Icon">
            <img src="./headerPictures/facebookIcon.png" alt="Facebook Icon">
        </div>

        <h1 id="firstHeader"> <span class="breakFirstHeader">היועץ OP שלום אני</span> <span class="breakFirstHeader">הקולינארי האישי שלך</span> </h1>
        <img id="firstPhone" src="./headerPictures/firstPhone.png" alt="Phone Image">
    </header>

    <main>
        <img id="robotPicture" src="./mainPictures/robotPicture.png" alt="Our Robot Picture">
        <p id="robotText">
            <span class="breakFirstHeader">אני בעל בינה מלאכותית ואוכל להמליץ לך על מנות</span>
            <span class="breakFirstHeader">, ומסעדות לפי העדפות הטעמים שלך</span>
            <span class="breakFirstHeader">את האינפורמציה הזאת אני אאסוף מההזמנות שלך</span>
            <span class="breakFirstHeader">כך שגם תוכל בעזרתי להזמין ולשלם במסעדה ללא</span>
            <span class="breakFirstHeader">?!כל המתנה למלצר, נכון שאני כביר</span>
        </p>

        <div id="flexCircles">
            <div>
                <img class="circles" src="./mainPictures/leftCircle.png" alt="Pay category">
                <h3 class="h3Color">משלמים</h3>
                <p>
                    <span class="breakFirstHeader robotsUnderText">" ה"חשבון</span>
                    <span class="breakFirstHeader robotsUnderText">אצלכם כבר</span>
                </p>
            </div>
            <div>
                <img class="circles" src="./mainPictures/centerCircle.png" alt="Order category">
                <h3 class="h3Color">מזמינים</h3>
                <p>
                    <span class="breakFirstHeader robotsUnderText">את המנות ושולחים</span>
                    <span class="breakFirstHeader robotsUnderText">להכנה במטבח</span>
                </p>
            </div>
            <div>
                <img class="circles" src="./mainPictures/rightCircle.png" alt="Scan category">
                <h3 class="h3Color">סורקים</h3>
                <p>
                    <span class="breakFirstHeader robotsUnderText">נכנסים אל המסעדה וסורקים</span>
                    <span class="breakFirstHeader robotsUnderText">את הברקוד שבשולחן</span>
                </p>
            </div>
        </div>
    </main>

    <footer>
        <img id="aboveLastPhone" src="./footerPictures/aboveLastPhone.png" alt="Decorate">
        <img id="underLastPhone" src="./footerPictures/underLastPhone.png" alt="Decorate">
        <h3 id="intrested">?מסעדנים</h3>
        <p id="intrestedText">
            <span class="breakFirstHeader">אני סוגר לכם את הפינה,</span>
            <span class="breakFirstHeader">תוכלו ללמוד יותר על הלקוחות שלכם</span>
            <span class="breakFirstHeader">אני מאפשר קיצור זמני שולחן וצמצום</span>
            <span class="breakFirstHeader">החזרי מנות, צמצום כח אדם ועלויות</span>
            <span class="breakFirstHeader">תפעול. בזכותי תגדיל מכירות כי אני</span>
            <span class="breakFirstHeader">יודע בדיוק מה להמליץ ללקוח שלך</span>
        </p>

        <img id="lastPhone" src="./footerPictures/lastPhone.png" alt="Our speical phone logo">
        <img id="lastHalfCircle" src="./footerPictures/lastHalfCircle.png" alt="Decorate">
        <img id="secondLogo" src="./headerPictures/logoLeft.png" alt="Decorate">
        <div id="orangeCircle"></div>

        <div>
           <div id="formHeaders">
              <h3>?מתעניינים בי</h3>
              <h4>:לפרטים נוספים</h4>
           </div>

            <form id="form" target="formDestination" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScnaSuQRNph4kNtIyagGYKrBsT4lFzFNAAAZ4dPJ1YFRPlC7A/formResponse" autocomplete="off">
                <div id="inputs">
                    <div id="flexInputs">
                        <input required id="fullName" name="entry.754762192" placeholder="שם מלא:" class="inputType1 empty" type="text">
                        <input required id="phone" name="entry.1802613921" placeholder="טלפון:" class="inputType1 empty" type="number">
                        <input id="email" name="entry.3130587" placeholder="מייל:" class="inputType1 empty" type="email">
                    </div>
                    <textarea class="empty" name="entry.1204214150" placeholder="הודעה:" id="massage"></textarea>
                </div>
                <input id="send" type="submit" value="שליחה">
                <iframe name="formDestination"></iframe>
            </form>

        </div>
    </footer>   
</div>

    <script src="script.js"></script>
</body>
</html>

css: 

html {
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
    overflow-x: hidden;
}

* {
    margin: 0 auto;
}

/*Header*/
header { /*Background Grey*/
    background: transparent linear-gradient(180deg, #F5F5F5 0%, #DEDEDE 100%) 0% 0% no-repeat padding-box;
    width: 100vw;
    height: 80vh;
}

#firstLogo {
    position: absolute;
    top: 30px;
    left: 70px;
}

#logoSub {
    position: absolute;
    top: 100px;
    left: 75px;
    font-family: 'Heebo', sans-serif;
    color: #080a41;
}

#firstHeader {
    position: absolute;
    top: 26vh;
    left: 25vw;
    font-family: 'Heebo';
    color: #080A41;
    font-size: 2vw;
}

#firstHeader>span{
    text-align: center;
}

#firstPhone {
   zoom: 70%;
   position: absolute;
   left: 58vw;
   top: 17vh;
   width: 40vw;
   height: 137vh;
}

#icons {
    position: absolute;
    top: 25px;
    right: 20px;
    display: none;
}

#icons>img {
    margin: 0.5vw;
    cursor: pointer;
}


.breakFirstHeader {
    display: block;
}


/*Main*/
main {
    background: var(--unnamed-color-080a41) 0% 0% no-repeat padding-box;
    background: #080A41 0% 0% no-repeat padding-box;
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: 1;
}

#robotPicture {
    display: block;
    margin: auto;
    width: 38vw;
    height: 28vh;
}

#robotText {
    color: white;
    font-family: 'Heebo', sans-serif;
    text-align: center;
    margin-top: 3vh;
    font-weight: 100;
    margin-bottom: 5vh;
    font-size: 1vw;
}

#flexCircles {
    display: flex;
    text-align: center;
}

.h3Color{
    color: #F68F6A; 
    font-size: 1.5vw;
    font-family: 'Heebo', sans-serif;
    margin-bottom: 1vh;
}

.robotsUnderText {
    color: white;
    font-family: 'Heebo', sans-serif;
    font-weight: 100;
    font-size: 1vw;
}


.circles {
    width: 12vw;
    height: 24.5vh;
}


/*Footer*/
footer {
    background: transparent linear-gradient(180deg, #F5F5F5 0%, #DEDEDE 100%) 0% 0% no-repeat padding-box;
    width: 100vw;
    height: 200vh;
    position: relative;
}

#lastPhone {
    zoom: 90%;
    position: absolute;
    left: 25vw;
    top: 25vh;
    width: 24.2vw;
    height: 73vh;
}


#orangeCircle {
    background: #F78C68;
    width: 1.5vw;
    height: 3vh;
    border-radius: 100%;
    position: absolute;
    bottom: 74.5vh;
    z-index: 2;
    left: 50vw;
    transform: translateX(-50%);
}

#lastHalfCircle{
    position: absolute;
    bottom: 0vh;
    left: 50vw;
    transform: translateX(-50%);
    width: 25vw;
    height: 15vh;
}


#secondLogo{
    position: absolute;
    bottom: 1vh;
    left: 50vw;
    transform: translateX(-50%);
    width: 4vw;
    height: 7vh;
}

#intrested{
    color: #F04F29;
    position: absolute;
    right: 32vw;
    font-family: 'Heebo', sans-serif;
    font-size: 3vw;
    position: absolute;
    top: 30vh;
}

#intrestedText {
    color: #080a41;
    position: absolute;
    right: 32vw;
    font-family: 'Heebo', sans-serif;
    top: 40vh;
    direction: rtl;
    font-size: 1vw;
}

form {
    position: absolute;
    bottom: 24vh;
    transform: translateX(-50%);
    left: 50vw;
}



#formHeaders {
    position: absolute;
    bottom: 63vh;
    left: 50vw;
    transform: translateX(-50%);
    font-size: 1.5vw;
    color: rgb(8, 10, 65);
    text-align: center;
}

#formHeaders>h3{
    font-family: 'Heebo', sans-serif;
}

#formHeaders>h4{
    font-size: 1vw;
    font-family: 'Heebo', sans-serif;
}

input {
    direction: rtl;
    border-radius: 5px;
    border: 1px solid #080A41;
    background: transparent;
    font-family: 'Heebo', sans-serif;
    font-size: 1vw;
}

::placeholder{
    color: #080A41;
    font-weight: bold;
    font-size: 1vw;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #080A41;

  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #080A41;

  }

#flexInputs{
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0px;
}

#massage {
    width: 20vw;
    height: 20vh;
    resize: none;
    background-color: transparent;
    direction: rtl;
    border-radius: 5px;
    border: 1px solid #080A41;
    font-family: 'Heebo', sans-serif;
    font-size: 1vw;
    position: relative;
    top: 0.9vh;
}

#massage::placeholder{
    font-size: 1vw;
}

.inputType1 {
    width: 17vw;
    height: 5vh;
    margin-top: 1vh; margin-bottom: 1vh;
}

#inputs {
    margin-bottom: -4vh;
}


#send {
    background-color: #080A41;
    color: white;
    border-radius: 25px;
    width: 40vw;
    display: block;
    margin: auto;
    height: 6vh;
    font-size: 3vh;
    cursor: pointer;
    margin-top: 8vh;
    border: none;
    outline: none;
}

#aboveLastPhone {
    zoom: 50%;
    width: 40vw;
    height: 100vh;
    position: absolute;
    top: -37vh;
    left: 64vw;
}

#underLastPhone {
    position: absolute;
    top: 84.8vh;
    left: 32.1vw;
    zoom: 100%;
    width: 18vw;
    height: 40vh;
    z-index: 1;
}








iframe{
    display: none;
}

#buttonPhone {
    position: absolute;
    left: 57vw;
    z-index: 3;
    top: 49.5vh;
    width: 5vw;
    height: 1.5vh;
    cursor: pointer;
    transform: rotate(13deg);
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

css мобильный: 

@media screen and (max-width: 768px) {
    #overflowPhone {
        overflow-x: hidden;
        position: relative
    }

    #firstLogo {
        left: 5vw;
        top: 3vh;
    }

    #logoSub {
        left: 5.8vw;
    }

    #flexCircles {
        zoom: 85%;
    }


    h1 {
        font-size: 5vw !important;
        left: 4vw !important;
        top: 35vh !important;
    }

    header {
        height: 85vh !important;
    }

    #firstPhone {
        width: unset !important;
        height: unset !important;
        left: 52vw !important;
        top: 50vh !important;
        zoom: 50% !important;
    }

    main {
        height: 93vh !important;
        padding-top: 2vh;
    }

    #robotPicture {
        width: unset !important;
        height: unset !important;
        left: 0vw !important;
        zoom: 70% !important;
    }

    #robotText {
        font-size: 3.5vw !important;
    }

    .circles {
        width: unset !important;
        height: unset !important;
        zoom: 85%;
        margin-top: 2vh;
    }

    .h3Color{
        font-size: 4vw !important;
    }
    
    .robotsUnderText {
        font-size: 3vw !important;
    }

    #lastPhone {
        width: unset !important;
        height: unset !important;
        left: 60vw !important;
        top: 15vh !important;
        transform: translateX(-50%);
        zoom: 80%;
    }

    #orangeCircle {
        width: 4vw !important;
        height: 2vh !important;
        top: 96vh !important;
    }

    footer {
        height: 170vh;
    }

    #formHeaders>h3 {
        font-size: 5vw !important;
    }
    #formHeaders>h4 {
        font-size: 3vw !important;
        font-size: 3.5vw !important;
    }

    .inputType1 {
        width: 30vw !important;
        height: 18 !important;
        font-size: 3.5vw !important;
    }


    textarea {
        width: 30vw !important;
        margin-right: 40vw; font-size: 3.5vw !important;
    }

    #send {
        width: 70vw !important;
    }

    ::placeholder {
        font-size: 3.5vw !important;
    }

    #secondLogo {
        width: 14vw !important;
        height: 7vh !important;
    }

    #lastHalfCircle {
        width: 70vw !important;
        height: 20vh !important;
    }

    #underLastPhone {
        zoom: unset !important;
        left: 60vw !important;
        top: 100vh !important;
        zoom: 70% !important;
        height: 36vh !important;
        width: 25vw !important;
        transform: rotate(382.5deg);
    }

    #aboveLastPhone {
        left: 60vw !important;
        transform: rotate(380deg);
        zoom: unset !important;
        height: 70vh !important;
    }

    #lastPhone {
        left: 65vw !important;
        width: 80vw !important;
        height: 75vh !important;
    }

    #buttonPhone{
        left: 75vw !important;
        width: 20vw !important;
        top: 56.5vh !important;
    }
}

@media screen and (min-width:370px) and (max-width:500px){
    #firstPhone {
        top: 65vh !important;
    }
 }

js: 

let mail = document.getElementById("email");

document.getElementById("send").onclick = function () {

    if (window.innerWidth>768)
    {
        if(document.getElementById("fullName").value.length>0 && document.getElementById("phone").value.length>0)
        {
            if (mail.required)
            {
                if(mail.indexof("@")>0 && mail.indexof(".")>0)
                {
                    let submmited = document.createElement("p");
                    submmited.innerText = "נשלח בהצלחה";
                    submmited.style.color = "#080a41";   
                    submmited.style.fontFamily = `Heebo`;   
                    submmited.style.fontSize = "1.3vw";
                    submmited.style.position = "absolute";
                    submmited.style.bottom = "15vh";
                    submmited.style.left = "50vw";
                    submmited.style.fontWeight = "bold";
                    submmited.style.transform =  "translateX(-50%)";
                    document.getElementsByTagName("footer")[0].appendChild(submmited);
                
                    setTimeout(() => {
                        $(".empty").val("");
                        $("textarea").val("");
                    }, 10);
                }

                else {

                }
            }

            else {
                let submmited = document.createElement("p");
                submmited.innerText = "נשלח בהצלחה";
                submmited.style.color = "#080a41";   
                submmited.style.fontFamily = `Heebo`;   
                submmited.style.fontSize = "1.3vw";
                submmited.style.position = "absolute";
                submmited.style.bottom = "15vh";
                submmited.style.left = "50vw";
                submmited.style.fontWeight = "bold";
                submmited.style.transform =  "translateX(-50%)";
                document.getElementsByTagName("footer")[0].appendChild(submmited);
            
                setTimeout(() => {
                    $(".empty").val("");
                    $("textarea").val("");
                }, 10);
            }
        }
    }













    else {
        if(document.getElementById("fullName").value.length>0 && document.getElementById("phone").value.length>0)
        {
            if (mail.required)
            {
                if(mail.indexof("@")>0 && mail.indexof(".")>0)
                {
                    document.getElementById("send").style.visibility="hidden";
                    let submmited = document.createElement("p");
                    submmited.innerText = "נשלח בהצלחה";
                    submmited.style.color = "#080a41";   
                    submmited.style.fontFamily = `Heebo`;   
                    submmited.style.fontSize = "6vw";
                    submmited.style.position = "absolute";
                    submmited.style.bottom = "20vh";
                    submmited.style.left = "50vw";
                    submmited.style.fontWeight = "bold";
                    submmited.style.transform =  "translateX(-50%)";
                    document.getElementsByTagName("footer")[0].appendChild(submmited);
                
                    setTimeout(() => {
                        $(".empty").val("");
                        $("textarea").val("");
                    }, 10);
                }

                else {

                }
            }

            else {
                document.getElementById("send").style.visibility="hidden";
                let submmited = document.createElement("p");
                submmited.innerText = "נשלח בהצלחה";
                submmited.style.color = "#080a41";   
                submmited.style.fontFamily = `Heebo`;   
                submmited.style.fontSize = "6vw";
                submmited.style.position = "absolute";
                submmited.style.bottom = "20vh";
                submmited.style.left = "50vw";
                submmited.style.fontWeight = "bold";
                submmited.style.transform =  "translateX(-50%)";
                document.getElementsByTagName("footer")[0].appendChild(submmited);
            
                setTimeout(() => {
                    $(".empty").val("");
                    $("textarea").val("");
                }, 10);
            }
        }
    }

    /*

     */
}

mail.addEventListener("input",function(e){
    if(mail.value.length!=0)
    {
        mail.setAttribute("required","true");
    }

    else {
        mail.removeAttribute("required","false");
    }


});
...