Css Jquery移动列表视图和媒体查询

我有一个列表视图：

<ul data-inset="true" data-role="listview" data-theme="a" id="nav" role="navigation" data-icon="none" data-corners="false">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

当用户在较小的屏幕上查看listview时，应该发生的是，圆角会变成直角

---

然而，这似乎在Chrome上运行良好，但在Safari或iPhone上则不行。事实上，如果我在Safari上使用Firebug lite，它看起来甚至没有显示出来（但它显示在Chrome开发者的工具栏上）…？

您使用过viewport标记吗，Safari需要它？另外，当您将“最大宽度”更改为“最大设备宽度”，并将其设置为480px时会发生什么情况？为什么不使用

orientationchange

事件来更改列表视图的类别？@Gajotres是的，我已经准备好了该元标记。

@media only screen and (max-width: 767px) { 
    .ui-corner-top {
        -moz-border-radius-topleft: 0;
        -webkit-border-top-left-radius: 0;
        border-top-left-radius: 0;
        -moz-border-radius-topright: 0;
        -webkit-border-top-right-radius: 0;
        border-top-right-radius: 0;
    }
    .ui-corner-bottom {
        -moz-border-radius-bottomleft: 0;
        -webkit-border-bottom-left-radius: 0;
        border-bottom-left-radius: 0;
        -moz-border-radius-bottomright: 0;
        -webkit-border-bottom-right-radius: 0;
        border-bottom-right-radius: 0;
    }

} /* end media query */