使用JS和css實現檢測移動設備方向的變化并判斷橫豎屏幕
2024-03-17 分類： 網站建設
方法一：用觸發手機的橫屏和豎屏之間的切換的事件
復制代碼 代碼如下:
window.addEventListener("orientationchange", function() { // 宣布新方向的數值
alert(window.orientation);
}, false); 方法二：監聽調整大小的改變 復制代碼 代碼如下:
window.addEventListener("resize", function() { // 得到屏幕尺寸 (內部/外部寬度，內部/外部高度)
}, false);
css判斷橫豎屏幕 復制代碼 代碼如下:
/* portrait */ @media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
/* landscape-specific styles */
} 本地window.matchMedia方法允許實時媒體查詢。我們可以利用以上媒體查詢找到我們是處于直立或水平視角： 復制代碼 代碼如下:
var mql = window.matchMedia("(orientation: portrait)"); // 如果有匹配，則我們處于垂直視角
if(mql.matches) {
// 直立方向
alert("1")
} else {
//水平方向
alert("2")
}
// 添加一個媒體查詢改變監聽者
mql.addListener(function(m) {
if(m.matches) {
// 改變到直立方向
document.getElementById("test").innerHTML="改變到直立方向";
}
else {
document.getElementById("test").innerHTML="改變到水平方向";
// 改變到水平方向
}
}); 本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！
window.addEventListener("orientationchange", function() { // 宣布新方向的數值
alert(window.orientation);
}, false); 方法二：監聽調整大小的改變 復制代碼 代碼如下:
window.addEventListener("resize", function() { // 得到屏幕尺寸 (內部/外部寬度，內部/外部高度)
}, false);
css判斷橫豎屏幕 復制代碼 代碼如下:
/* portrait */ @media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
/* landscape-specific styles */
} 本地window.matchMedia方法允許實時媒體查詢。我們可以利用以上媒體查詢找到我們是處于直立或水平視角： 復制代碼 代碼如下:
var mql = window.matchMedia("(orientation: portrait)"); // 如果有匹配，則我們處于垂直視角
if(mql.matches) {
// 直立方向
alert("1")
} else {
//水平方向
alert("2")
}
// 添加一個媒體查詢改變監聽者
mql.addListener(function(m) {
if(m.matches) {
// 改變到直立方向
document.getElementById("test").innerHTML="改變到直立方向";
}
else {
document.getElementById("test").innerHTML="改變到水平方向";
// 改變到水平方向
}
}); 本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！
本文標題：使用JS和css實現檢測移動設備方向的變化并判斷橫豎屏幕
轉載源于：http://m.newbst.com/news44/320494.html
成都網站建設公司_創新互聯，為您提供企業建站、搜索引擎優化、全網營銷推廣、手機網站建設、網站設計公司、小程序開發
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- 企業成都網站建設需警惕，低價格陷阱你了解多少 2024-03-17
- 網頁如何適當留白 2024-03-17
- 松江網站建設有哪些處理圖片元素的方法 2024-03-17
- 網頁設計分享看如何找到網站設計的關鍵點。 2024-03-17
- 成都做網站需要注意的因素解析 2024-03-17
- 如何才能做好品牌企業品牌網站建設策劃的關鍵 2024-03-17
- 美國服務器可放置的網站數量 2024-03-17
- 企業網站怎么分析競爭對手 2024-03-17
- 如何做好企業網站的內鏈和外鏈設計 2024-03-17
- 這幾個網站seo技巧一般人我不告訴他 2024-03-17
- 怎樣成為網頁設計專家？ 2024-03-17
- 美國站群服務器的選擇優勢 2024-03-17
- 原創內容對網站的重要性 2024-03-17
- 雍熙干貨分享高端網站建設要如何建立？價格需要多少？ 2024-03-17
- 網站優化之關鍵字密度 2024-03-17
- 網站建設如何制作增強網站效果？ 2024-03-17
- 云服務器哪家好？對比知名的云服務器服務提供商的優缺點 2024-03-17
- VPS主機和專用主機的優缺點 2024-03-17
- 怎樣讓友情鏈接制作不影響訪問速度 2024-03-17