Question

我试图设计一个页面内容在iPhone屏幕上显示的网页，但我无法正常工作，因为所有溢出都会显示出来。

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

我已将它放在jsfiddle中，并希望知道我的错误。

非常感谢

Answer 1

也许它适合你。

您需要一个容器来存储文本和图像，并使用相对和绝对位置。

请记住隐藏滚动条，浏览器的宽度不同，并且您不希望文本容器更改其宽度。

＆＃13;

::-webkit-scrollbar {
  display: none;
}
body {
  font-size: 100%;
  padding: 0;
  margin: 0;
}
p {
  font-size: 0.8em;
}
#container {
  position: relative;
  width: 50%;
  margin: 0 auto;
}
.screen {
  overflow: scroll;
  width: 60%;
  height: 61%;
  position: absolute;
  top: 14%;
  left: 20%;
}
.phone-image {
  width: 100%;
  display: block;
}

＆＃13;

<div id="container">
  <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>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum purus id nisl tristique condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam elementum dui et turpis euismod ullamcorper.
      Maecenas id tempus lectus. Duis rutrum lectus ac diam scelerisque posuere. Praesent sit amet auctor tellus, id vestibulum massa. Sed sed leo et nisl lobortis imperdiet eget sed leo.</p>
    <p>Nunc augue risus, pharetra in nulla ut, posuere finibus ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse mollis erat mi, vel commodo lorem gravida in. Nulla euismod commodo leo, a egestas dolor
      lacinia a. Suspendisse mattis lacus nisi, at consectetur ex auctor sed. Suspendisse potenti. Nunc hendrerit id nisl scelerisque cursus. Etiam suscipit, ipsum mollis volutpat ultricies, turpis arcu feugiat erat, et vulputate mauris velit vel leo.
      Aenean ac dolor tempor, sodales nunc consectetur, gravida diam. Nulla sapien ipsum, tempus at vestibulum a, lobortis ut diam. Nam sit amet risus laoreet, mattis ex sed, semper odio. Nam sollicitudin tellus erat, ut vulputate elit bibendum ut.</p>
    <p>Integer ultricies non nisi sed ultrices. Aliquam at odio accumsan, tincidunt ex nec, imperdiet magna. Vestibulum ac placerat justo. Nam facilisis tortor in tristique tincidunt. Phasellus tempor lectus eu libero dignissim, nec ultricies leo auctor.
      Etiam dui tortor, faucibus id suscipit vel, aliquam non mi. Nulla non ultricies odio. Aenean at metus erat. Pellentesque eget consectetur velit, blandit pellentesque est. Nulla porta mi ligula, sit amet consequat lorem placerat ut. Ut mattis hendrerit
      ex, at dapibus enim tincidunt et. Aenean quis nisl at neque porta sagittis sit amet nec mauris. Nullam libero purus, aliquet eu eleifend eget, fermentum a enim.</p>
  </div>
</div>

＆＃13;

My Fiddle

滚动时隐藏溢出

1 个答案: