[英]HTML5 Fitting To Screen Resolution
我一直在尋找解決方案，運氣很小。 我不太擅長HTML或CSS。 我了解基本知識，但是我需要用HTML 5編寫的內容。因此，我將非常感謝您的協助。
我使用這個網站來了解我要在這里做什么。
它應該是可以在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，因為圖像沒有縮放到屏幕尺寸，這是我的嘗試。 看來無論如何它都適合最大寬度。 如果有更好的方法或者您知道解決方法，我將非常感謝您的幫助。 謝謝
嘗試更改以下代碼：
//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％，然后瀏覽器應正確縮放。
HTML5 Javascript移動應用程序不適用於較小分辨率的平板電腦
[英]HTML5 Javascript Mobile App not fitting on smaller resolution tablets
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.