我如何根据在什么设备上查看网站来更改网站？

Question

我在亚洲的网站信息，主页上有每个国家的按钮。它适用于计算机、笔记本电脑、大型 iPad 或平板电脑和其他大屏幕。但在手机和较小的 iPad 和平板电脑等较小的屏幕上，按钮太小而无法阅读和点击正确的按钮。在较小的平板电脑上更难阅读更多的文字。

是否有某种排序标签允许根据设备更改内容？

如果您想查看网站 URL 是：http://asianindex.byethost24.com

（尝试在小屏幕和大屏幕上观看）

Answer 1

好吧，我不是最好的，可能还有更好的解决方案，但对我来说：我只是更改 javascript 中的 Html 内容：例如：我将其用于我的顶部内容栏，如果设备足够小：比如："document.body.clientWidth>=750" 或设备宽度小于 750 像素，那么我将更改顶部栏。开始之前：请记住，要包含多行字符串，您需要制表符上方的“`”符号（数字键 1 旁边）而不是普通的引号。

function homebtn(){
  if (window.location.href.split('/').pop() === ""||Number(window.location.href.split('#').pop())>0) { 
    sendDataToLoad(jdata_location,jdata_imageurl,16,one,one,jdata_level);
      return '<a onclick="modeUPLOAD();"id= uploadbtn>Upload</a>'
}
  else{
    return '<a href="./">Home</a>'
  }
}


function loadheader(){
  if(document.body.clientWidth>=750){ 
    document.getElementById('topbar').innerHTML=`
    <p> <a href="/">MosaicTokyo </a> </p>
    <ul>
              <li><a href="./contact">Contact</a></li>
              <li><a href="./login">Log-In</a></li>
              <li>${homebtn()}</li>


    </ul>
  `

}else{
    document.getElementById('topbar').innerHTML=`<p> <a href="/">MosaicTokyo</a> </p>             
    <div class="dropdown"> //I made a dropdown menu instead of buttons next to each other
    <button class="dropbtn"><img src="/images/three-bars-icon-5.jpg" alt=""></button>
       <div class="dropdown-content">
   <a href="./contact">Contact</a>
   <a href="./login">LogIn</a>                     
   ${homebtn()}
     </div>`

}

这是我 HTML

的顶栏

<nav id="topbar"></nav>

这个脚本也是我如何在不复制和粘贴的情况下使多个页面的顶部内容栏相同。

TLDR：使用脚本更改页面的布局，如果您为元素分配了不同的 ID，您可以在 CSS 中操作该元素，而不会弄乱您的平板电脑视图！您还可以更改按钮样式吗？

Answer 2

我为您制作了一个 jsfiddle 以便您可以实时预览下面的代码在做什么。确保用鼠标移动预览 window 以便模拟大屏幕和小屏幕的宽度。

我正在做的是告诉我的选项 divs 在屏幕 max-width: 575px 和最大宽度更高时以不同方式显示，它们正常运行（无条件）。

You can read more about that on w3schools.

@media screen and (max-width: 575px) {
  #main>div {
    display: block;
    font-size: 20px;
  }
}

div>div {
  display: inline-block;
  background: lightblue;
  margin: 5px;
}

<div id="main">
  <div> option 1 </div>
  <div> option 2 </div>
  <div> option 3 </div>
</div>

我如何根据在什么设备上查看网站来更改网站？

How would I make a website change depending on what device it is viewed on?

html

device