2
我想設計一個網頁，其中的頁面內容顯示在iPhone屏幕內，但我無法讓溢出正常工作，因爲所有溢出都顯示出來。滾動時隱藏溢出
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
function getHeight() {
if (self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
if (document.body) {
return document.body.clientHeight;
}
}
function setScreen() {
var img = document.getElementById('iphone');
//or however you get a handle to the IMG
var myWidth = getWidth();
var width = String(Math.round(getWidth()/2 - img.clientWidth/2 + (img.clientWidth/525) * 94)) + 'px';
var height = String(Math.round(getHeight()/2 - img.clientHeight/2 + (img.clientWidth/915) * 170)) + 'px';
document.getElementById("screen").style.paddingTop = height;
document.getElementById("screen").style.paddingLeft = width;
document.getElementById("screen").style.paddingRight = width;
document.getElementById("screen").style.paddingBottom = height;
console.log("Image Width: " + img.clientWidth);
console.log("Screen Width: " + myWidth);
console.log("Calculated PaddingLeft: " + width);
}
window.onresize = function() {
setScreen();
}
setScreen();.screen {
padding-top: 15%;
padding-left: calc(50% - 262px);
position: absolute;
overflow: hidden;
display: block;
}
.phone-image {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}<img src='http://s11.postimg.org/vcchvwjub/iphone.jpg' id='iphone' class="phone-image">
<div id="screen" class="screen">
<p>This is where my text goes and it should now wrap and only show within the phone, I think.</p>
</div>我已經把它放在一個jsfiddle，並希望知道我有錯。
非常感謝
你的意思是這樣的結果https://jsfiddle.net/m2tsw830/2/？ –
不，我的意思是不要在iPhone屏幕外顯示文字，但是當我滾動文字顯示上方和下方時 – HenryM