2. 程式人生 > >Swiper滑動Html5手機瀏覽器自適應

Swiper滑動Html5手機瀏覽器自適應

阿新 • • 發佈：2019-02-10

手機網頁能通過window.screen.height, width獲取螢幕解析度，於是可以通過解析度比率來計算高度。

  1. window.onload=function(){  
  2.     var swiper = document.getElementById("swiper");  
  3.     var scale = window.screen.height / window.screen.width;  
  4.     swiper.style.height = document.body.clientWidth * scale + "px";  
  5. }  

結合swiper來做個手機全屏適配的滑動，全部程式碼如下
  1. <!DOCTYPE html
    >
  2. <htmllang="en">
  3. <head>
  4.     <metacharset="utf-8">
  5.     <metaname="viewport"content="width=device-width,height=device-height,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6.     <title>swiper demo</title>
  7.     <
    linkrel="stylesheet"href="swiper.min.css"/>
  8.     <styletype="text/css">
  9.     body {  
  10.         font-family: Helvetica Neue, Helvetica, Arial, sans-serif;  
  11.         font-size: 14px;  
  12.         color:#000;  
  13.         margin: 0;  
  14.         padding: 0;  
  15.     }  
  16.     .swiper-container {  
  17.         margin: 0 auto;  
  18.     }  
  19.     .swiper-slide {  
  20.         text-align: center;  
  21.         font-size: 18px;  
  22.         background: #fff;  
  23.     }  
  24.     </style>
  25. </head>
  26. <body>
  27.     <divclass="swiper-container"id="swiper">
  28.         <divclass="swiper-wrapper">
  29.             <divclass="swiper-slide"style="background:green;">Slide 1</div>
  30.             <divclass="swiper-slide"style="background:yellow;">Slide 2</div>
  31.             <divclass="swiper-slide"style="background:orange;">Slide 3</div>
  32.         </div>
  33.         <divclass="swiper-pagination"></div>
  34.     </div>
  35.     <scriptsrc="swiper.min.js"></script>
  36.     <script>
  37.         window.onload=function(){  
  38.             var swiper = document.getElementById("swiper");  
  39.             var scale = window.screen.height / window.screen.width;  
  40.             swiper.style.height = document.body.clientWidth * scale + "px";  
  41.         }  
  42.         var mySwiper = new Swiper('.swiper-container',{  
  43.             direction: 'horizontal',  
  44.             loop: false,  
  45.             pagination: '.swiper-pagination'  
  46.         });      
  47.     </script>
  48. </body>
  49. </html>

轉載自：http://blog.csdn.net/dyyaries/article/details/46442187

相關推薦

Swiper滑動Html5手機瀏覽器自適應

手機網頁能通過window.screen.height, width獲取螢幕解析度，於是可以通過解析度比率來計算高度。 window.onload=function(){       var swiper = document.getElementById("swiper");       var

HTML5 移動頁面自適應手機螢幕四類方法

1、使用meta標籤：viewport H5移動端頁面自適應普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。 viewport 是使用者網頁的可視區域。翻譯為中文可以叫做"

html5手機網站需要加的那些meta標籤，手機網站自適應

1、移動網站要加的html5相關meta和標籤    a、<!-- 強制讓文件與裝置的寬度保持1：1 -->    <meta name="viewport" content="width=device-width, initial-scale=1, mi

HTML5 移動頁面自適應手機螢幕四種方法

1、使用meta標籤：viewport H5移動端頁面自適應普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。 viewport 是使用者網頁的可視區域。翻譯為中文可以叫做"視區"

0512日重點：淘寶的H5手機端自適應解決方案：Flexible

自動獲取 手機端 issue 解決方案 target 解決 flex get bsp 參考文檔： https://github.com/amfe/lib-flexible https://github.com/amfe/article/issues/17 自我總結：F

前端切圖:手機端自適應布局demo

original shu 源碼 size 自適應 art 分享 nsh defined 手機端自適應布局demo 原型如下： 圖片發自簡書App 要求如下：適應各種機型源碼如下： <!DOCTYPE html > <html>

手機端自適應字體大小和元素寬度自適應

type 測試 nim AD ali jquery round 查詢 element 第一種，媒體查詢： @media (min-width:0px){ html{font-size:12px;} } @media (min-width: 320px){

解決手機端自適應頁面出現 X軸滾動條問題

最近在用 Bootstrap 寫一個需要適配 WEB 和 WAP 的網站，寫完後發現 WAP 端總是會出現橫向滾動條，也就是 X 軸滾動條，導致 WAP 端頁面左右滑來滑去，很是令人蛋疼，即使設定了 overflow-x： hidden 也無法去除，通過各種途徑尋找解決方法，最終在 張鑫

html5手機瀏覽器啟動微信客戶端支付例項

html5手機瀏覽器啟動微信客戶端支付例項，外部瀏覽器html5微信支付技術，如何在手機瀏覽器微信支付，在微信客戶端外的移動端網頁使用微信支付     首先在微信支付官網https://pay.weixin.qq.com/【我的產品】申請h5支付，免費申請的哦，很快就可以下

實現手機端自適應佈局的幾種方法

1.固定寬度 頭部設定 <meta name="viewport" id="viewport" content="width=640,user-scalable=0, target-densitydpi=320"> ，意思為根據設計稿的

手機端自適應(rem使用)

<!DOCTYPE html> <html lang="en" style="font-size: 100px"> <head> <!--使用 <

html+css手機端自適應網頁

一，最近在做專案，寫移動端的網頁，主要是自適應的問題。bootstrap等前端框架用的不好，又不想耽誤時間，不能自適應很煩人，這裡給大家介紹下我的方法， 也是結合了很多人的思路。 1.在頭部加入這樣的一行程式碼： <meta content="width=devi

移動端（手機）自適應rem佈局

   rem這是個低調的css單位，近一兩年開始嶄露頭角，有許多同學對rem的評價不一，有的在嘗試使用，有的在使用過程中遇到坑就棄用了。但是我對rem綜合評價是用來做web app它絕對是最合適的人選之一。 rem是什麼？     rem（font size of t

手機端自適應頁面通用CSS及公用HTML寫法

把頁面的通用屬性全部寫出來。 所有的手機端新建專案時候都可以直接拿這套程式碼快速搭建一個手機端框架。 js中規定了頁面最大寬度。為16rem。所以width：16rem；就等於width：100%； 我一般喜歡把邊距設定為0.5rem。所以頁面一般寬度我寫了15rem。

html5 Canvas 如何自適應螢幕大小

但是這樣創建出的畫布不能隨著瀏覽器視窗大小的改變而動態的改變畫布的大小。而這一點往往又非常重要， 因為我們會經常改變瀏覽器視窗大小，不會一直保持某個固定的大小。  html程式碼 <canva

Bootstrap 手機螢幕自適應的響應式佈局開關

Bootstrap提供了一套響應式佈局的解決方案。但是有時候我們需要自己控制是否需要這個響應式佈局。 在3.x的bootstrap裡面，如果想要開啟，需要新增下面的東西： <head> <meta name="viewport" content="widt

asp.net 呼叫echarts顯示圖表控制元件隨瀏覽器自適應解決方案

1、問題來源        我們在asp.net開發中常使用到frameset的框架結構，比如上左中右方式，在中間部分是一個可以控制左側部分顯示隱藏的功能，這時右邊內容區域如果有使用echarts進行圖表顯示時，就會出現不能隨瀏覽器自適應，我們該如何做呢？2、解決方法   

css 使富文字編輯器中的內容 在手機端自適應

荊軻刺秦王 我們在做網站的時候 經常會遇到  這樣的情況：網站的內容是 cms 系統後臺用 富文字編輯器 填充的，這個時候，就有一個問題：當螢幕解析度變成 750px 以下，也就是手機端的時候，後臺用富文字編輯器填充的內容樣式就會變化，最重要的是，在富文字編輯器裡面新增的圖片就會錯

css實現背景圖PC端/手機端自適應

css程式碼： @charset "utf-8"; *{ margin: 0px; padding: 0px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px

Unity 生成WebGL時UI介面隨瀏覽器自適應

在生成的html裡面修改程式碼 function Reset() { var canvas = document.getElementById("#canvas"); canvas.height= document.