HTML5适合屏幕分辨率

Question

I've been looking around for a solution to this with very little luck. 我一直在寻找解决方案，运气很小。 I'm not very good at HTML or CSS. 我不太擅长HTML或CSS。 I understand basics, but I need what I am making in HTML 5. So I would really appreciate any assistance. 我了解基本知识，但是我需要用HTML 5编写的内容。因此，我将非常感谢您的协助。

I used this site to get kind of what I'm going for Here . 我使用这个网站来了解我要在这里做什么。

It supposed to be an HTML5 app that can be displayed on Android, iPhone, and iPad. 它应该是可以在Android，iPhone和iPad上显示的HTML5应用。 It really doesn't have many features. 它确实没有很多功能。 Mainly just the ability to swipe to flip pages just like that link shows. 主要是能够像链接显示一样滑动来翻转页面的功能。 My issue is I can't get the images and it as a whole to fit whichever screen it is on. 我的问题是我无法获取图像，并且无论从哪个屏幕上来看，图像都无法容纳。 It seems like it is hard coded to work at iPhone size, but when displayed on an iPad it takes up a small portion of the screen. 似乎很难将其编码为适合iPhone大小，但是在iPad上显示时，它只占据屏幕的一小部分。 I'll post his code below so you don't have to go there to see it. 我将在下面发布他的代码，因此您不必去那里查看它。

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

I added the imageFit one because the images were not scaling to the screen size and that was my attempt. 我添加了imageFit，因为图像没有缩放到屏幕尺寸，这是我的尝试。 It seems that it goes for the max-width no matter what. 看来无论如何它都适合最大宽度。 If there are any better ways of doing this or if you know a fix I would really appreciate the help. 如果有更好的方法或者您知道解决方法，我将非常感谢您的帮助。 Thank you 谢谢

Answer 1

Try changing this chunk of code: 尝试更改以下代码：

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

To: 至：

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

This will use javascript to auto-detect the screen resolution. 这将使用javascript自动检测屏幕分辨率。

Then the script will multiply the li width by the number of li elements to adjust the slideContainer ul to fit content: 然后，脚本会将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;

If the above doesn't work, also try removing #imgFit style and see if it fixes the scrolling. 如果上述方法无效，请尝试删除#imgFit样式，看看它是否可以解决滚动问题。 problem. 问题。 It may be interfering with something. 它可能会干扰某些事情。

Also, by setting the image widths and heights to 100% with the inline styling they will look out of proportion when loaded on different resolutions. 此外，通过使用内联样式将图像的宽度和高度设置为100％，当以不同的分辨率加载时，它们的外观将成比例。 If you want the images to stay a specific proportion, you can try just setting the width to 100%, then the browser should scale it properly. 如果要使图像保持特定比例，可以尝试将宽度设置为100％，然后浏览器应正确缩放。

HTML5适合屏幕分辨率

问题描述

1 个解决方案

解决方案1
1 2012-05-10 05:45:38

HTML5适合屏幕分辨率

问题描述

1 个解决方案

解决方案1 1 2012-05-10 05:45:38

解决方案1
1 2012-05-10 05:45:38