1
我一直在四处寻找一个解决这个用很少的运气。我不擅长HTML或CSS。我了解基础知识，但我需要我在HTML 5中所做的。所以我非常感谢任何帮助。HTML5拟合屏幕分辨率
我用这个网站获得什么样我要去为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之一，因为图像没有缩放到屏幕大小，那是我的尝试。无论如何，它似乎都适用于最大宽度。如果有更好的方法来做到这一点，或者如果你知道一个解决方案，我会非常感谢你的帮助。谢谢
你有没有尝试设置“宽度=设备宽度”视口元？ –
我给一个镜头 – steven
你有没有试图改变的JavaScript为preferredWidth到ipad分辨率？ –