移動端使用CSS或JS判斷橫屏和豎屏的講解
在移動端中我們經(jīng)常碰到橫屏豎屏的問題，那么我們應(yīng)該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。
首先在head中加入如下代碼：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
針對上述viewport標(biāo)簽有如下說明
1)、content中的width指的是虛擬窗口的寬度。
2)、user-scalable=no就一定可以保證頁面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設(shè)為1.0就可以了。
3)、initial-scale=1.0 初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會將user-scalable理解為用戶手動縮放，如果user-scalable=no，initial-scale將無法生效。
4)、手機頁面可以觸摸移動，但是如果有需要禁止此操作，就是頁面寬度等于屏幕寬度是頁面正好適應(yīng)屏幕才可以保證頁面不能移動。
5)、如果頁面是經(jīng)過縮小適應(yīng)屏幕寬度的，會出現(xiàn)一個問題，當(dāng)文本框被激活（獲取焦點）時，頁面會放大至原來尺寸。
一：CSS判斷橫屏豎屏
寫在同一個CSS中
@media screen and (orientation: portrait) {
/*豎屏 css*/
}
@media screen and (orientation: landscape) {
/*橫屏 css*/
}
分開寫在2個CSS中
豎屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" >
橫屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" >
二、JS判斷橫屏豎屏
//判斷手機橫豎屏狀態(tài)：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('豎屏狀態(tài)！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('橫屏狀態(tài)！');
}
}, false);
//移動端的瀏覽器一般都支持window.orientation這個參數(shù)，通過這個參數(shù)可以判斷出手機是處在橫屏還是豎屏狀態(tài)。
最近項目有電子合同方面的開發(fā)，需要電子簽字，（用的jsignature插件，如果有空以后單獨寫個使用心得）。在手機小屏幕上簽字，全屏橫屏才是最好的體驗。用戶豎屏打開頁面時要去簽字，提示用戶把手機橫過來，這樣體驗太low了，程序員要考慮能用技術(shù)解決的就不要去勞煩用戶（免得用戶煩了回頭打電話咬你）。
先來幾個檢測屏幕方向的方法：
//判斷屏幕方向
if(window.orientation==90||window.orientation==-90){
alert("橫屏狀態(tài)！")
}
//監(jiān)聽屏幕方向
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("橫屏:" + window.orientation);
case 0:
case 180:
alert("豎屏:" + window.orientation);
break;
}
}
<!--css媒介查詢判斷-->
@media (orientation: portrait) { } 橫屏
@media (orientation: landscape) { }豎屏
進入網(wǎng)頁檢測是否橫屏狀態(tài)，不是就給canvas加樣式：
transform: rotate(90deg);
最初想的是把jsignature的canvas畫布用css3transform橫過來就可以了，誰想到，畫布橫是過來了，touch相關(guān)的手勢還是豎的（簽字啊，筆畫不跟手怎么簽）。如果是普通項目僅僅是顯示的話，上面的方法已經(jīng)夠用了。
還好這個項目是網(wǎng)頁內(nèi)嵌app中，app有方法強制網(wǎng)頁橫屏，改了改頁面，交上去了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
在Flutter中,Text小部件默認(rèn)會嘗試在其父小部件的約束內(nèi)顯示所有文本內(nèi)容,如果父小部件沒有提供足夠的空間或沒有設(shè)置約束限制,Text小部件可能無法正確換行,本文給大家介紹了在Flutter中如何讓文字Text換行,需要的朋友可以參考下2024-07-07
android 中win10 使用uwp控件實現(xiàn)進度條Marquez效果
這篇文章主要介紹了android 中win10 使用uwp控件實現(xiàn)進度條Marquez效果,需要的朋友可以參考下2017-06-06
android編程實現(xiàn)類似于支付寶余額快速閃動效果的方法
這篇文章主要介紹了android編程實現(xiàn)類似于支付寶余額快速閃動效果的方法,涉及Android時間函數(shù)的相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了Android自定義webView頭部進度加載效果,小編畫一條進度線，然后加載webview上面，具體實現(xiàn)代碼大家參考下本文2017-11-11
Android底部導(dǎo)航欄的三種風(fēng)格實現(xiàn)
這篇文章主要介紹了Android底部導(dǎo)航欄的三種風(fēng)格實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
本文給大家分享的是使用Android實現(xiàn)判斷是否有外網(wǎng)鏈接，有需要的小伙伴可以參考下。2016-02-02
Android RecyclerView設(shè)置下拉刷新的實現(xiàn)方法
這篇文章主要介紹了Android RecyclerView設(shè)置下拉刷新的實現(xiàn)方法,希望通過本文通過SwipeRefreshLayout方式實現(xiàn)下拉刷新，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了Android簡單實現(xiàn)文件下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
圖文詳解Android Studio搭建Android集成開發(fā)環(huán)境的過程
這篇文章主要以圖文的方式詳細介紹了Android Studio搭建Android集成開發(fā)環(huán)境的過程，文中安裝步驟介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
Android SharedPreferences存取操作以及封裝詳解
SharedPreferences是安卓平臺上一個輕量級的存儲類，用來保存應(yīng)用的一些常用配置，比如Activity狀態(tài)，Activity暫停時，將此activity的狀態(tài)保存到SharedPereferences中；當(dāng)Activity重載，系統(tǒng)回調(diào)方法onSaveInstanceState時，再從SharedPreferences中將值取出2021-11-11