Как получить доступ к другому файлу html, если ширина устройства равна ширине мобильного телефона? - PullRequest
Новая
       17

Как получить доступ к другому файлу html, если ширина устройства равна ширине мобильного телефона?

2 голосов
/ 15 февраля 2020

Итак, я реализовал ваш код с javascript, но до сих пор не могу понять, как это сделать. Хорошо, я нуб в JS но да. Вот мой код: первый - мой индекс с CSS второй - мой «веб-приложение» с CSS И я просто не хочу работать по какой-то причине. Если я пытаюсь изменить размер моего браузера, он остается в файле Indes. Итак, я реализовал ваш код с javascript, но я все еще не могу понять, как это сделать. Хорошо, я нуб в JS но да. вот мой код: первый - мой индекс с CSS второй - мой «веб-приложение» с CSS И я просто не хочу работать по какой-то причине. Если я пытаюсь изменить размер моего браузера, он остается в файле Indes. Итак, я реализовал ваш код с javascript, но я все еще не могу понять, как это сделать. Хорошо, я нуб в JS но да. Вот мой код: первый - мой индекс с CSS, второй - мой «веб-приложение» с CSS И я просто не хочу работать по какой-то причине. Если я пытаюсь изменить размер моего браузера, он остается в файле Indes. Итак, я реализовал ваш код с javascript, но я все еще не могу понять, как это сделать. Хорошо, я нуб в JS но да. Вот мой код: первый - мой индекс с CSS второй - мой «веб-приложение» с CSS И я просто не хочу работать по какой-то причине. Если я пытаюсь изменить размер моего браузера, он остается в файле Indes. Итак, я реализовал ваш код с javascript, но я все еще не могу понять, как это сделать. Хорошо, я нуб в JS но да. вот мой код: первый - мой индекс с CSS второй - мой «веб-приложение» с CSS и я просто не хочу работать по какой-то причине. Если я пытаюсь изменить размер моего браузера, он остается в файле indes. 

.fullscreen-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 30%;
  left: center;
  width: 98%;
  height: 50%;
}

html {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  margin-top: 20px;
  margin: 1%;
  box-shadow: 0 1px 10px white, 0 0 40px black, 0 0 80px white;
  color: black;
  height: 96%;
  width: 98%;
}

body {
  background-color: white;
  float: center;
}

h1 {
  color: black;
  text-align: center;
  font-size: 25px;
  margin-bottom: 5px;
  text-shadow: 1px 1px 4px gray, 1px 1px 4px white;
}

p {
  color: black;
  text-align: center;
  margin-top: 0px;
  font-size: 15px;
}

header {
  padding: 1px;
  margin: auto;
  box-shadow: 0 0 10px white, 0 0 20px white;
}

nav {
  margin-left: auto;
  margin-top: 50px;
  margin-bottom: auto;
  float: left;
  background-color: white;
  height: auto;
  width: auto;
}

article {
  float: center;
  margin-top: 50px;
  margin-bottom: auto;
  width: auto;
  height: 100%;
}


/*NAV Menu*/

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  color: black;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: black;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: rgb(0, 0, 0, 0.2);
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

span {
  color: black;
  width: auto;
  height: auto;
  margin-top: 1%;
  float: right;
  margin-right: 1%;
}


/*Responsive*/

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

footer {
  float: center;
  margin: auto;
  margin-top: 60%;
}

p1 {
  text-align: left;
}

.style {
  font-size: 30px;
  cursor: pointer;
  font-family: monospace, arial;
}

span {
  color: black;
  width: auto;
  height: auto;
  margin-top: 1%;
  float: right;
  margin-right: 1%;
}


/*LOGO*/

img.ri {
  position: absolute;
  max-width: 80%;
  top: 10%;
  left: 10%;
  border-radius: 3px;
  width: 100px;
  height: 100px;
}

img.ri:empty {
  top: 55%;
  left: 49%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 500px) {
  html {
    background-image: url("C:/Users/Joalu/Desktop/WebApp/img/indexbackground.png");
    font-family: 'Lato';
    width: auto;
    height: 1908px;
    overflow-x: hidden;
    background-repeat: no-repeat;
  }
  body {
    margin: 0;
  }
  header {
    text-align: center;
  }
  h1 {
    font-size: 20px;
    color: white;
    margin-top: 3px;
    font-family: 'Lato';
  }
  h2 {
    display: block;
  }
  .btnheader {
    background-color: rgb(0, 0, 0, 0.5);
    border: 0;
    width: 485px;
    height: 87px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 30px white;
  }
  .overlay {
    background-color: rgb(0, 0, 0, 0.5);
    margin-top: 30px;
    text-align: center;
  }
  .btn-group button {
    background-color: rgb(0, 0, 0, 0.5);
    /* Green background */
    border: 0.5px solid rgb(0, 0, 0, 0.5);
    color: white;
    /* White text */
    padding: 20px 33px;
    /* Some padding */
    cursor: pointer;
    /* Pointer/hand icon */
    float: left;
    /* Float the buttons side by side */
    font-family: 'Lato', arial;
    width: 120.7px;
    text-align: center;
  }
  /* Clear floats (clearfix hack) */
  .btn-group:after {
    content: "";
    clear: both;
    display: table;
  }
  .btn-group button:not(:last-child) {
    border-right: none;
    /* Prevent double borders */
  }
  /* Add a background color on hover */
  .btn-group button:hover {
    background-color: rgb(0, 0, 0, 0.3);
    border: 0px;
    box-shadow: 0 0 40px black, 0 0 15px white;
  }
  .dot {
    height: 258px;
    width: 258px;
    background-color: rgb(0, 0, 0, 0);
    border-radius: 100%;
    display: inline-block;
    margin-top: 670px;
    cursor: pointer;
  }
  .dot:hover {
    box-shadow: 0 0 50px white;
  }
  img.ri {
    position: absolute;
    max-width: 80%;
    top: 20%;
    left: 10%;
    border-radius: 3px;
    width: 500px;
    height: 500px;
    margin-top: 140px;
  }
  img.ri:empty {
    top: 35%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  img.ri:hover {
    box-shadow: 0 0 10px gray, 0 0 40px black;
  }
  .footer {
    padding: 5%;
    height: 464px;
    width: 500px;
    background-color: rgb(0, 0, 0, 0.8);
    margin-top: 320px;
    color: white;
  }
  h3 {
    text-align: center;
    color: white;
    margin-top: 380px;
  }
  .bordr {
    border: 5px;
    height: auto;
    width: auto
  }
  p {
    text-align: center;
    color: white;
    font-family: 'Lato', arial;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="css/MainCSS.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="image/favicon.png" sizes="32x32">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <title>
    scxry
  </title>
</head>

<body>
  <div class="fullscreen-bg">
    <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
        <source src="video/12345.mp4" type="video/mp4">
    </video>
  </div>
  <header>
    <span class="style" onclick="openNav()">&#9776;</span>

  </header>


  <script type="text/javascript">
    if (screen.width <= 500) {
      document.location = "webapp.html";
    }
  </script>




  <nav>
    <div id="myNav" class="overlay">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <a href="index.html">Home</a>
        <a href="Store.html">Store</a>
        <a href="YouTube.html">Social Media</a>
        <a href="Contact.html">Contact</a>
        <a href="FAQ.html">FAQ</a>
        <p>scxry cmpny est. 2020
          <p>
      </div>
    </div>
  </nav>

  <img src="image/scxrylogo800back.png" class="ri" />


  <script>
    function openNav() {
      document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
      document.getElementById("myNav").style.width = "0%";
    }
  </script>

</body>

</html>

@media only screen and (max-width: 500px) {

    html{
        background-image: url("C:/Users/Joalu/Desktop/scxryshop.de/image/webappbackground.png");
        font-family:  'Lato';
        width: auto;
        height: 1908px;
        overflow-x: hidden;
        background-repeat: no-repeat;
    }

    body{
        margin: 0;
    }
    
    header{
        text-align: center;
    }

    h1 {
        font-size: 20px;
        color: white;
        margin-top: 3px;
        font-family:   'Lato';
    }

    h2 {
        display: block;

    }

    .btnheader {
        background-color: rgb(0, 0, 0,0.5);
        border: 0;
        width: 485px;
        height: 87px;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 0 30px white;
    }

    .overlay {
        background-color: rgb(0, 0, 0,0.5);
        margin-top: 30px ;
        text-align: center;
    }


    .btn-group button {
        background-color: rgb(0, 0, 0,0.5); /* Green background */
        border: 0.5px solid rgb(0, 0, 0,0.5);
        color: white; /* White text */
        padding: 20px 33px; /* Some padding */
        cursor: pointer; /* Pointer/hand icon */
        float: left;/* Float the buttons side by side */
        font-family:  'Lato', arial;
        width: 120.7px;
        text-align: center;
        
      }
      
      /* Clear floats (clearfix hack) */
      .btn-group:after {
        content: "";
        clear: both;
        display: table;
      }
      
      .btn-group button:not(:last-child) {
        border-right: none; /* Prevent double borders */
      }
      
      /* Add a background color on hover */
      .btn-group button:hover {
        background-color: rgb(0, 0, 0,0.3);
        border: 0px;
        box-shadow: 0 0 40px black, 0 0 15px white;
      }
      
      .dot {
        height: 258px;
        width: 258px;
        background-color: rgb(0, 0, 0,0);
        border-radius: 100%;
        display: inline-block;
        margin-top: 670px;
        cursor: pointer;
      }

      .dot:hover {
          box-shadow: 0 0 50px white;
      }

      img.ri{
        position: absolute;
        max-width: 80%;
        top: 20%;
        left: 10%;
        border-radius: 3px;
        width: 500px;
        height: 500px;
        margin-top: 140px;
    }
    
    img.ri:empty{
        top: 35%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    img.ri:hover{
        box-shadow: 0 0 10px gray, 0 0 40px black;
    }

    .footer {
            padding: 5%;
            height: 464px;
            width: 500px;
            background-color: rgb(0, 0, 0,0.8);
            margin-top: 320px;
            color: white;
    }

    h3 {
        text-align: center;
        color: white;
        margin-top: 380px;
    }

    .bordr {
        border: 5px;
        height: auto;
        width: auto
    }

    p {
        text-align: center;
        color: white;
        font-family: 'Lato', arial;
    }
    
}

@media only screen and (max-width: 1920px) {



                



}
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="css/webappcss.css" type="text/CSS" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  
</head>
<body>
    <header>

    <a href="https://www.scxryshop.de/">
        <button class="btnheader">
                <h1>scxry</h1>
        </button>
    </a>

    </header>
    <body>

      <div class="btn-group">
        <a href="https://www.scxryshop.de/">
            <button class="btn1">Media</button>
        </a>
        <a href="https://www.scxryshop.de/About.html">
            <button class="btn2">FAQ</button>
            </a>
            <a href="https://www.scxryshop.de/Contact.html">
            <button class="btn3">Contact</button>
        </a>
            <button class="btn4">About</button>
    </div>

    <a href="index.html">           <img src="image/custom.png" class="ri" style="height: auto"> </a>

        <div style="text-align:center">
            <a href="https://www.scxryshop.de/">
            <span class="dot"></span>
        </a>
        
          </div>
          <h3>Blog</h3>
          <div class="bordr">
              <p>This new mobile update will provide you <br> with the
            best experience.<br> Be sure to explore the whole website,<br>
            some personal information about me:</p>
            <p>I'm 15 years old and I'm a student at JKR Wendlingen <br>
            I will finish my school soon and will then go <br>
        to the MES in Kirchheim.</p>
        <p>I was thinking of selling some 3D printed <br>
        products because you can almost make everything <br>
    therefor prototyping is no problem.</p>
    <p>Also I'm looking forward to study abroad <br> and go to the 
        US. Thank you so much for visting <br>
        this website if you need any help <br>
        feel free to contact me.
    </p>
    <p><b>THANK YOU!</b></p>
          </div>
          <script type="text/javascript">
            if (screen.width >=  500) {
            document.location = "index.html";
            } 
            </script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 15 февраля 2020

Существуют различные элементы и методы для адаптивного дизайна (изменение содержимого и / или макета в зависимости от ширины устройства). Старайтесь не думать о ней как о другой HTML странице, а о элементах на той же странице, которые отображаются и скрываются в зависимости от ширины устройства.

Например: - 

<div class="desktop-content">
  <p>This is the content someone will see on a desktop</p>
</div>
<div class="mobile-content">
  <p>This is the mobile content</p>
</div>

А затем с помощью CSS вы можете сделать что-то вроде этого: - 

.mobile-content{
  display:none;
}
@media only screen and (max-width: 500px) {
  .desktop-content{
    display:none
  }
  .mobile-content{
    display:block;
  }
}

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

Если у вас ДОЛЖНЫ быть 2 отдельных файла HTML, тогда вы можете сделать перенаправление JavaScript в зависимости от ширины окна на правильный ... но Я бы не рекомендовал такой подход.

0 голосов
/ 15 февраля 2020

Вместо этого на главной странице вы можете использовать javascript для перенаправления пользователя 

    <script type="text/javascript">
    if (screen.width <= 500) {
    document.location = "other.html";
    } else {
document.location = "index.html";
}
    </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...