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