javascript HTML5 适合屏幕分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10524241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Fitting To Screen Resolution
提问by steven
I've been looking around for a solution to this with very little luck. I'm not very good at HTML or CSS. I understand basics, but I need what I am making in HTML 5. So I would really appreciate any assistance.
我一直在四处寻找解决方案，但运气不佳。我不太擅长 HTML 或 CSS。我了解基础知识，但我需要我在 HTML 5 中制作的内容。所以我非常感谢任何帮助。
I used this site to get kind of what I'm going for Here.
我使用这个网站来了解我想要的东西Here。
It supposed to be an HTML5 app that can be displayed on Android, iPhone, and iPad. 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. I'll post his code below so you don't have to go there to see it.
它应该是一个 HTML5 应用程序，可以在 Android、iPhone 和 iPad 上显示。它真的没有很多功能。主要是能够像该链接显示的那样滑动翻页。我的问题是我无法将图像和它作为一个整体来适应它所在的任何屏幕。似乎很难在 iPhone 大小下工作，但在 iPad 上显示时，它只占屏幕的一小部分。我将在下面发布他的代码，这样您就不必去那里看到它。
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. 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
我添加了 imageFit 一个，因为图像没有缩放到屏幕尺寸，这是我的尝试。似乎无论如何它都适用于最大宽度。如果有任何更好的方法可以做到这一点，或者如果您知道修复方法，我将非常感谢您的帮助。谢谢
回答by Derek Gutierrez
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. problem. It may be interfering with something.
如果上述方法不起作用，还可以尝试删除 #imgFit 样式并查看它是否修复了滚动问题。问题。它可能会干扰某些事情。
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. 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%，它们在以不同分辨率加载时看起来会不成比例。如果您希望图像保持特定比例，您可以尝试将宽度设置为 100%，然后浏览器应该正确缩放它。
