mobileAdapt:移动端加载h5页面适配

时间:2024-06-18 01:36:57
【文件属性】:

文件名称:mobileAdapt:移动端加载h5页面适配

文件大小:347KB

文件格式:ZIP

更新时间:2024-06-18 01:36:57

JavaScript

cpsc 移动端加载h5页面适配,实现swiper图片轮播使用任意尺寸手机屏幕,同时图片宽高也是可以任意指定,不采用@media()标签。 在浏览器模式下,加载的页面能够*变换长宽而让页面保持适配,但是在移动端却会由于不同屏幕的宽高而出现问题。 本例实现再移动端加载h5页面,采用swiper控件实现图片轮播和手指触摸滑动效果。 难点: 由于移动端加载h5的时候获取的视口大小与完全渲染h5时获取的视口大小不一致,会导致swiper需要计算宽高问题不正确 解决方案: 通过onready、document.readyState="complete"都不奏效,采用计时器延缓计算swiper高度


【文件预览】:
mobileAdapt-master
----index.html(14KB)
----images()
--------banner01.png(20KB)
--------blockButtondx.png(5KB)
--------ycircle.png(5KB)
--------iphone()
--------logo.png(12KB)
--------banner02.png(21KB)
--------rcircle.png(5KB)
--------banner03.png(23KB)
--------blockButtoncg.png(2KB)
--------bcircle.png(5KB)
----js()
--------jquery-1.6.2.min.js(89KB)
--------jquery1.9.1.js(90KB)
--------swiper.min.js(62KB)
--------plugins()
--------iscroll.js(33KB)
--------hybrid-1.0.2.js(179KB)
--------swiper.js(156KB)
----README.md(721B)
----css()
--------layout.css(8KB)
--------swiper.min.css(14KB)
--------swiper.css(16KB)

网友评论