0

我的导航栏中有 4 个页面链接。我想在使用移动浏览器时调整它们的大小。

这是我检测手机的 JS：function detectmob() {

 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    alert('This be a mobile browser');
    style3(); //a function which applies other CSS changes to my page
    //Trying to figure out how I'd change the width of my a elements within my nav to 100% width 

  }
}

CSS：

#topnav ul li a {
    width: 175px; //I'd like to change this to 100% using JS based on above condition
    height: 40px;
    line-height: 53px;
    border-bottom: 4px solid #636393;
    padding:0px;
    color: #fff;
    font-size:18px;
    font-weight:lighter;
    text-align:center;
    text-decoration: none;
    display: block;
    -webkit-transition: .1s all linear;
    -moz-transition: .1s all linear;
    transition: .1s all linear;
}

HTML：

<nav id="topnav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="video.html">Trailers</a></li>
        <li id='adminPage'><a href="admin.html">Admin</a></li>
    </ul>
</nav>

如果为真，这就是我在 detectmob() 中尝试过的：

navItems = document.getElementsByTagName('a');

 for(var i =0; i < navItems.length;++1){
navItems[1].style.width = "100%"; 
    }

但我收到错误：未捕获的 ReferenceError：前缀操作中的左侧表达式无效

4

3 回答 3

5

您应该只在您的 css 中使用媒体查询来根据浏览器大小进行调整。例如，当浏览器小于 500px 时，将使用以下 CSS：

@media screen and (max-width : 500px) {
    /* Styles for less than 500px */
}
于 2013-04-03T17:30:02.417 回答
3

使用媒体查询允许您根据当前使用您网站的设备在 CSS 中定义样式。

我认为媒体查询是实现您寻求的响应式布局的更好方法：

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

于 2013-04-03T17:29:58.957 回答
3

改用媒体查询。CSS：

@media all and (max-width: 320px) {

    #topnav ul li a {
        width:100%;
    }

}
于 2013-04-03T17:30:25.760 回答