个人中心
gpt4 book ai didi

javascript - HTML5 适合屏幕分辨率

转载 作者：行者123 更新时间：2023-11-28 18:46:14 25 4
gpt4 key购买 nike

我一直在四处寻找解决方案，但运气不佳。我不太擅长 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 一个，因为图像没有缩放到屏幕尺寸，这是我的尝试。无论如何，它似乎都适用于最大宽度。如果有任何更好的方法可以做到这一点，或者如果您知道修复方法，我将非常感谢您的帮助。谢谢

最佳答案

尝试更改这段代码:

//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%，然后浏览器应该会适本地缩放它。

关于javascript - HTML5 适合屏幕分辨率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10524241/

25 4 0
文章推荐： asp.net - 我想覆盖 gridview HeaderStyle。目前皮肤(通过主题)正在申请
文章推荐： javascript - 如何从 JavaScript 中的对象数组及其索引中获取最小值？
文章推荐： jquery - 在一行中使用 jQuery SVG 动画插件的问题
文章推荐： javascript - 在 Javascript 中，为什么 [1,2] == [1,2] 解析为 false？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com