Question

我正在制作一个网站，我的右上角有一个正方形旋转45度，其中一些是身体的外部。在桌面上你无法看到它，但是当我使用手机时，我可以缩小，身体的正确部位会变得更大。

您可以在屏幕上看到红色，这就是它在桌面上的外观以及我希望它在移动设备上的外观。

但是在移动设备上它看起来像这样，再次看到红色是你能看到的

我的身体上隐藏了溢出-x，所以没有滚动条，但用户仍然能够缩小并看到该网站就像移动设备上的第二张图片一样。

我尝试使用meta标签，但它并没有真正有任何不同，除了该网站开始放大，但用户仍然能够缩小。喜欢：

HTML

<body class="bg">
    <div id="box-top-right">
        <a href="#">SOME TEXT</a>
     </div>
 <div id="wrapper">
 </div>
 </body>

CSS

body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
 }

.bg {
background: url('../gfx/bg.png') top left;
}

#box-top-right {
position: absolute;
top: 75px;
right: -97px;
width: 400px;
height: 60px;
line-height: 60px;
text-align: center;
background: #ce180b;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color:white;
}

#wrapper {
width: 1200px;
position: absolute;
margin-top: -50px;
 }

Answer 1

我只是在容器内放一个容器并将其设置为溢出：隐藏; 将旋转的方块保持在容器div中。保持容器的宽度符合您的需要，

<html>
  <body>
    <div class="container">
      <div class="rotated-thingy">

和css：

html,body{
  width:100%;
  height:100%;
}
.container{
  width:100%;
  height:100%;/* depends, maybe it could be stretched by something else? */
  overflow-x:hidden;
  position:relative;
}
.rotated-thingy{
  position: absolute;
  top: 10px;
  right: 10px;/* or whatever appropriate here */
}

有时候，html和body的元素并没有像div那样完全对待。

让移动浏览器不显示身体外的元素？

1 个答案: