Html 阻止手机浏览器显示身体外部的元素？
我正在制作一个网站，我在网站右上角有一个旋转45度的正方形，其中一些是身体的外部。在桌面上你看不到它，但当我使用手机时，我可以缩小，身体的正确部位就会变大 红色是你能在屏幕上看到的，这是它在桌面上的外观，我希望它在移动设备上的外观 但在手机上看起来是这样的，红色是你能看到的 我在body上隐藏了overflow-x，所以没有滚动条，但用户仍然可以缩小并查看该站点，就像移动设备上的第二张图片一样 我尝试了meta标签，但它并没有真正产生任何不同，除了网站开始放大，但用户仍然能够缩小。 比如： HtmlHtml 阻止手机浏览器显示身体外部的元素？,html,css,Html,Css,我正在制作一个网站，我在网站右上角有一个旋转45度的正方形，其中一些是身体的外部。在桌面上你看不到它，但当我使用手机时，我可以缩小，身体的正确部位就会变大 红色是你能在屏幕上看到的，这是它在桌面上的外观，我希望它在移动设备上的外观 但在手机上看起来是这样的，红色是你能看到的 我在body上隐藏了overflow-x，所以没有滚动条，但用户仍然可以缩小并查看该站点，就像移动设备上的第二张图片一样 我尝试了meta标签，但它并没有真正产生任何不同，除了网站开始放大，但用户仍然能够缩小。 比如：
我只是在身体里放了一个容器，把它设为溢出：隐藏； 将旋转的正方形保持在容器div内。 保持容器的宽度在您需要的范围内
<html>
<body>
<div class="container">
<div class="rotated-thingy">
有时html和body元素的处理方式与div不完全相同 代码示例是madey旋转的东西在哪里？当我添加overflow:hidden到我的容器中时，站点上的所有内容都会消失，没有overflow:hidden它不会有任何不同。如果你在容器上设置overflow:hidden，它需要手动设置它的高度。也许只是去溢出-x：隐藏，然后，更新我的答案。改变容器高度为100vh，只是为了得到它的高度。现在它在我的手机上工作（使用chrome），除了当我使用android浏览器时，所有的内容都是隐藏的，但我仍然可以点击它。也许你的android浏览器版本不支持vh？我甚至没想过。谢谢你的帮助。
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;
}
<html>
<body>
<div class="container">
<div class="rotated-thingy">
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 */
}