保持手機瀏覽器不顯示身體外的元素？

我正在製作一個網站，我在右上角旋轉了45度的方塊，其中一些是身體的外部。在桌面上，你無法看到它，但是當我在移動設備上放大時，身體的正確位置變得更大。保持手機瀏覽器不顯示身體外的元素？

紅色是你能夠在你的屏幕上看到的東西，這就是它在桌面上的樣子，以及我希望它在移動設備上的樣子。

但在移動它看起來像這樣，再次其中紅色是什麼，你能看到

我被溢出 - X隱藏在體內，所以世界上沒有滾動條，但用戶仍然可以縮小並查看移動設備上的第二張照片等網站。

我嘗試過使用元標記，但其實並沒有什麼不同，只是網站開始放大，但用戶仍然可以縮小。像：

的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; 
}

來源

2015-04-15 Casper

代碼示例 – Casper

哪裏是旋轉的東西？ – sEver

我只是把一個容器體內，並設置溢出：隱藏; 保持容器格內旋轉的正方形。保持在任何你需要的容器的寬度，

<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和身體不完全同等對待的方式div的是。

來源

2015-04-15 15:23:50 sEver

當我添加溢出：隱藏到我的容器在網站上的一切消失，沒有溢出：隱藏它沒有任何不同。 – Casper

如果溢出：隱藏在容器上，它需要手動設置高度。也許只是去溢出-x：隱藏然後，更新我的答案。 – sEver

將容器高度更改爲100vh，以獲得高度。現在它的工作在我的手機（使用鉻），除了當我使用Android瀏覽器，然後所有的內容被隱藏，但即時通訊仍然能夠點擊它。 – Casper

保持手機瀏覽器不顯示身體外的元素？

回答

相關問題