HTML5适合屏幕分辨率

时间：2012-05-09 21:19:04

标签： javascript css html5

我一直在寻找解决方案，但运气很少。我不擅长HTML或CSS。我理解基础知识，但我需要用HTML 5制作。所以我非常感谢任何帮助。

我使用这个网站来获得Here的目标。

它应该是一个可以在Android，iPhone和iPad上显示的HTML5应用程序。它真的没有很多功能。主要只是滑动翻页的能力，就像链接显示一样。我的问题是我无法获得图像，它整体上适合它所在的屏幕。似乎硬编码在iPhone大小上工作，但是当在iPad上显示时，它占据了屏幕的一小部分。我将在下面发布他的代码，这样你就不必去那里看了。

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Swipe Gesture - Gallery</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;" />
<link href="css/styles.css" rel="Stylesheet" />
</head>
<body>
  <div id="wrapper">
    <ul id="slideContainer">
      <li>
        <img src="img/1.jpg" width="100%" height="100%"/>
      </li>
      <li>
        <img src="img/2.jpg" width="100%" height="100%" />
      </li>
      <li>
        <img src="img/3.jpg" width="100%" height="100%" />
      </li>
      <li>
        <img src="img/4.jpg" width="100%" height="100%" />
      </li>
      <li>
        <img src="img/5.jpg" width="100%" height="100%"/>
      </li>
      <li>
        <img src="img/6.jpg" width="100%" height="100%"/>
      </li>
      <li>
        <img src="img/7.jpg" width="100%" height="100%"/>
      </li>
    </ul>
  </div>
</body>
<script type="text/javascript" src="js/scripts.js">
</script>
</html>

CSS：

body
{
  margin:0;
  padding:10px;
}

#wrapper
{
  overflow:hidden;
}

#wrapper ul
{
  list-style:none;
  margin:0;
  padding:0;
  -webkit-transition: -webkit-transform 0.3s linear;
}

#wrapper ul li
{
  float:left;
}
#imgFit {
   width: 100%;
   min-width: 320px;
   max-width: 768px
}

JS：

 (function() {
var swipey = {
slideContainer: null, //<ul> element object that holds the image slides
wrapper: null, //meant for masking/clipping
slides: null, //array of all slides i.e <li> elements
distanceX: 0, //distance moved in X direction i.e left or right
startX: 0, //registers the initial touch co-ordinate
preferredWidth: 0, //dynamic variable to set width
preferredHeight: 0, //dynamic variable to set height
direction: "", //direction of movement
timer: null, //timer that set starts when touch starts
timerCounter: 0, //counter variable for timer
isTouchStart: false, //boolen to chk whether touch has started
maxDistance: 0, //maximum distance in X direction that slide container can move
currentDistance: 0, //current distance moved by slide container through translate

initSwipey: function() {
//scroll the window up to hide the address bar of the browser.
window.setTimeout(function() { window.scrollTo(0, 1); }, 100);
//get all the instances of the HTML elements
swipey.wrapper = document.getElementById("wrapper");
swipey.slideContainer = document.getElementById("slideContainer");
swipey.slides = slideContainer.getElementsByTagName("li");

//for iPhone, the width and height
swipey.preferredWidth = 320;
swipey.preferredHeight = 416; //510 for android
//setting the width and height to our wrapper with overflow = hidden
swipey.wrapper.style.width = swipey.preferredWidth + "px";
swipey.wrapper.style.height = swipey.preferredHeight + "px";
//setting the width to our <ul> element which holds all the <li> elements
swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";
swipey.slideContainer.style.height = swipey.preferredHeight + "px";
//calculating the max distance of travel for Slide Container i.e <ul> element
swipey.maxDistance = swipey.slides.length * swipey.preferredWidth;
//initialize and assign the touch events
swipey.initEvents();
},
initEvents: function() {
//registering touch events to the wrapper
swipey.wrapper.addEventListener("touchstart", swipey.startHandler, false);
swipey.wrapper.addEventListener("touchmove", swipey.moveHandler, false);
swipey.wrapper.addEventListener("touchend", swipey.endHandler, false);
},
//funciton called when touch start event is fired i.e finger is pressed on the screen
startHandler: function(event) {
//stores the starting X co-ordinate when finger touches the device screen
swipey.startX = event.touches[0].pageX; //.changedTouches[0]
//timer is set on
swipey.timer = setInterval(function() { swipey.timerCounter++; }, 10);
swipey.isTouchStart = true;
event.preventDefault(); //prevents the window from scrolling.
},
//funciton called when touch move event is fired i.e finger is dragged over the screen
moveHandler: function(event) {
if (swipey.isTouchStart) {
swipey.distanceX = event.touches[0].pageX - swipey.startX;
//move the slide container along with the movement of the finger
swipey.slideContainer.style.webkitTransform = "translate3d(" + (swipey.distanceX + swipey.currentDistance) + "px, 0,0)";
}
},
//funciton called when touch end event is fired i.e finger is released from screen
endHandler: function(event) {
clearInterval(swipey.timer); //timer is stopped
if (swipey.distanceX > 0) {
swipey.direction = "right";
}
if (swipey.distanceX < 0) {
swipey.direction = "left";
}
//the following conditions have been discussed in details
if ((swipey.direction == "right" && swipey.currentDistance == 0) || (swipey.direction == "left" && swipey.currentDistance == -(swipey.maxDistance - swipey.preferredWidth))) {
swipey.comeBack();
}
else if (swipey.timerCounter < 30 && swipey.distanceX > 10) {
swipey.moveRight();
}
else if (swipey.timerCounter < 30 && swipey.distanceX < -10) {
swipey.moveLeft();
}
else if (swipey.distanceX <= -(swipey.preferredWidth / 2)) { //-160
swipey.moveLeft();
}
else if (swipey.distanceX >= (swipey.preferredWidth / 2)) { //160
swipey.moveRight();
}
else {
swipey.comeBack();
}

swipey.timerCounter = 0; //reset timerCounter
swipey.isTouchStart = false; //reset the boolean var
swipey.distanceX = 0; //reset the distance moved for next iteration
},
moveLeft: function() {
swipey.currentDistance += -swipey.preferredWidth;
swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
//using CSS3 transformations - translate3d function for movement
swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
},
moveRight: function() {
swipey.currentDistance += swipey.preferredWidth;
swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
},
comeBack: function() {
swipey.slideContainer.style.webkitTransitionDuration = 250 + "ms";
swipey.slideContainer.style.webkitTransitionTimingFunction = "ease-out";
swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
}
}; //end of swipey object
window.swipeyObj = swipey; //expose to global window object
})();

swipeyObj.initSwipey(); //invoke the init method to get started

我添加了imageFit，因为图像没有缩放到屏幕尺寸，这是我的尝试。无论如何，它似乎都适用于最大宽度。如果有更好的方法可以做到这一点，或者如果你知道修复我会非常感谢你的帮助。谢谢

1 个答案:

答案 0 :(得分：1)

尝试更改此代码块：

//for iPhone, the width and height
swipey.preferredWidth = 320;
swipey.preferredHeight = 416; //510 for android

要：

//Auto-detect resolution via javascript:
swipey.preferredWidth = screen.width;
swipey.preferredHeight = screen.height;

这将使用javascript自动检测屏幕分辨率。

然后脚本将li宽度乘以li元素的数量，以调整slideContainer ul以适合内容：

//setting the width to our <ul> element which holds all the <li> elements
swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";
swipey.slideContainer.style.height = swipey.preferredHeight + "px";
//calculating the max distance of travel for Slide Container i.e <ul> element
swipey.maxDistance = swipey.slides.length * swipey.preferredWidth;

如果上述方法不起作用，请尝试删除#imgFit样式并查看它是否修复了滚动。问题。它可能会干扰某些事情。

此外，通过使用内嵌样式将图像宽度和高度设置为100％，在加载到不同分辨率时，它们将看起来不成比例。如果您希望图像保持特定比例，您可以尝试将宽度设置为100％，然后浏览器应该正确缩放它。

相关问题
最新问题