移动端开发之处理手机设备的横竖屏
这篇文章主要介绍了Mobile Web开发基础之-—处理手机设备的横竖屏，window.orientation属性与onorientationchange事件以及media query方式是开发过程中需要注意到的两种解决方式,需要的朋友可以参考下
为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为重要。
window.orientation属性与onorientationchange事件
window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
1：使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式，这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
body[orient=landscape]{
background-color: #ff0000;
}
body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<p>
内容
</p>
<script type="text/javascript">
(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
var body=document.body;
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};
</script>
</body>
</html>2: 类似的思路，不通过CSS的属性选择器来实现，如下代码的实现方案：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<p>
内容
</p>
<script type="text/javascript">
(function(){
var init=function(){
var updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
break;
}
document.body.parentNode.setAttribute("class",orientation);
};
window.addEventListener("orientationchange",updateOrientation,false);
updateOrientation();
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</body>
</html>
使用media query方式
这是一种更为方便的方式，使用纯CSS就实现了对应的功能，如下代码演示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){
body {
background-color: #00ff00;
}
}
</style>
</head>
<body>
<p>
内容
</p>
</body>
</html> 低版本浏览器的平稳降级
如果目标移动浏览器不支持media query，同时window.orientation也不存在，则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。如下代码所示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>按键</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
document.body.parentNode.setAttribute("class",orientation);
};
var init=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<p>
内容
</p>
</body>
</html> 统一解决方案
将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");
var updateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
};
var init=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<p>
内容
</p>
</body>
</html>Atas ialah kandungan terperinci 移动端开发之处理手机设备的横竖屏. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1675
14
1429
52
1333
25
1278
29
1257
24
Telefon mudah alih Samsung Galaxy S25 Ultra bocor: 6.86 inci, nisbah skrin-ke-badan mendatar 94.1%
Aug 17, 2024 pm 01:49 PM
Menurut berita pada 17 Ogos, sumber @ibinguniverse menyiarkan di Weibo hari ini, menyatakan bahawa saiz tepat Apple iPhone 16 Pro Max ialah 6.88 inci, dan saiz tepat Galaxy S25 Ultra ialah 6.86 inci Kedua-duanya boleh dianggap sebagai 6.9 inci . Sumber menunjukkan bahawa Samsung Galaxy S25 Ultra mempunyai badan yang lebih sempit dan skrin yang lebih luas daripada S24 Ultra, dengan nisbah skrin-ke-badan mendatar sebanyak 94.1%, manakala nisbah skrin-ke-badan S24 Ultra mendatar ialah 91.5%. Fenye menyemak sumber Weibo yang berkaitan Dia juga mengulas pada gambar iPhone 16 Pro Max yang baru terdedah dan percaya bahawa adalah salah untuk berada dekat dengan lengkung mikro Telefon itu sebenarnya adalah skrin lurus + kaca 2.5D.
'Tandem OLED' telah dipopularkan oleh Apple. Bagaimanakah ia lebih baik daripada OLED?
Aug 19, 2024 am 04:42 AM
Walaupun Apple telah dikritik kerana kekurangan inovasi dalam beberapa tahun kebelakangan ini, Apple tidak selalu berdiri diam. Sekurang-kurangnya dari segi reka bentuk perkakasan, dengan sokongan harga unit produk Apple yang tinggi, juruteranya boleh mencuba beberapa teknologi baharu dengan mudah tanpa perlu memikirkan terlalu banyak isu kos. Sebagai contoh, iPad Pro, sebagai medan ujian "teknologi paparan" kegemaran Apple, iPad Pro telah berada di barisan hadapan dalam teknologi paparan untuk peranti pintar mudah alih daripada miniLED pada tahun 2021 kepada OLED bersamaan pada tahun 2024. Walaupun iPad Pro bukanlah peranti pintar mudah alih pertama yang dilengkapi dengan skrin miniLED (MSI mengeluarkan komputer riba miniLED setahun lebih awal daripada Apple), apabila anda membandingkan parameter kedua-duanya, anda akan segera menyedari bahawa ia tidak sama.
Hynix ialah yang pertama menunjukkan memori kilat UFS 4.1: berdasarkan zarah V9 TLC NAND
Aug 09, 2024 pm 03:33 PM
Menurut berita pada 9 Ogos, di Sidang Kemuncak FMS2024, SK Hynix menunjukkan produk storan terbaharunya, termasuk memori kilat universal UFS4.1 yang belum mengeluarkan spesifikasi secara rasmi. Menurut laman web rasmi Persatuan Teknologi Keadaan Pepejal JEDEC, spesifikasi UFS terkini yang diumumkan pada masa ini ialah UFS4.0 pada Ogos 2022. Kelajuan antara muka teorinya adalah setinggi 46.4Gbps Dijangkakan bahawa UFS4.1 akan meningkatkan lagi penghantaran kadar. 1. Hynix menunjukkan produk memori denyar tujuan umum 512GB dan 1TBUFS4.1, berdasarkan memori denyar V91TbTLCNAND 321 lapisan. SK Hynix juga mempamerkan zarah 3.2GbpsV92TbQLC dan 3.6GbpsV9H1TbTLC. Hynix menunjukkan berasaskan V7
Kamera bawah skrin 1.5K pertama! Nubia Z70 Ultra ada di sini: telefon skrin penuh sebenar Snapdragon 8 Gen4 pertama di dunia
Aug 19, 2024 pm 03:47 PM
Menurut berita pada 19 Ogos, Nubia telah mematuhi reka bentuk skrin penuh sebenar sejak keluaran Z50 Ultra, dan telah meneroka secara berterusan bidang fotografi proaktif di bawah skrin piksel tinggi. Hari ini, blogger digital Wisdom Pikachu mengumumkan bahawa Nubia Z70 Ultra, yang akan dikeluarkan pada separuh kedua tahun ini, akan debut dengan teknologi kamera bawah skrin 1.5K, yang merupakan penyelesaian UDC resolusi tertinggi dalam industri jadi jauh. Dilaporkan bahawa penyelesaian proaktif bawah skrin ZTE telah maju ke generasi keenam. Penyelesaian proaktif bawah skrin terkini tersedia dalam siri Nubia Z60 Ultra dan Red Magic 9S Pro. Resolusi skrin ialah 2480x1116, iaitu antara resolusi 1080P dan 1.5K. Kali ini Nubia akan menerobos batasan resolusi sedia ada dan menetapkan penanda aras baharu dalam industri.
Untuk menjalankan model Gemini Nano AI Google secara tempatan, telefon Samsung Galaxy S25 Ultra telah didedahkan untuk dilengkapi dengan memori 16GB
Jul 31, 2024 pm 05:55 PM
Menurut berita pada 31 Julai, sumber @ibinguniverse menyiarkan tweet pada Dilengkapi dengan memori 16GB. Kemas kini kapasiti memori telefon mudah alih Samsung Samsung telah melancarkan memori 16GB pada telefon mudah alih Galaxy S20 Ultra dan Galaxy S21 Ultra. Bermula daripada Galaxy S22 Ultra, termasuk telefon bimbit Galaxy S24 Ultra unggulan terkini, kapasiti memori telefon mudah alih Samsung dihadkan pada 12GB. Dilaporkan bahawa Samsung Galaxy S25 dan Galaxy S25+ akan datang akan menggunakan 12GB LPDD
Dihasilkan oleh Syarikat Teknologi Tenaga Baharu Ningde, bateri telefon mudah alih Samsung Galaxy S25 Ultra terdedah
Jul 31, 2024 pm 04:57 PM
Menurut berita pada 31 Julai, media teknologi SamMobile menerbitkan catatan blog semalam (30 Julai) dan mendapati maklumat bateri sesuai untuk telefon mudah alih Samsung Galaxy S25 Ultra di laman web pensijilan Safety Korea. Menurut maklumat umum, model bateri yang didedahkan kali ini ialah EB-BS938ABY dan EB-BS938ABE Masih belum jelas apakah perbezaan antara kedua-dua model tersebut. Fenye telefon mudah alih Samsung Galaxy S25 Ultra tidak akan menggunakan penyelesaian dwi bateri bagi telefon bimbit lipat Galaxy Z Fold6 dan Galaxy Z Flip 6, tetapi akan menggunakan reka bentuk bateri tunggal. Sebelum ini telah dilaporkan bahawa Samsung tidak akan menaik taraf dan mengoptimumkan spesifikasi bateri telefon mudah alih Galaxy S25 Ultra, dan masih akan menggunakan
Apple dan Huawei kedua-duanya mahu membuat telefon tanpa butang, tetapi Xiaomi membuatnya terlebih dahulu?
Aug 29, 2024 pm 03:33 PM
Menurut laporan dari Smartprix, Xiaomi sedang membangunkan telefon bimbit tanpa butang yang diberi nama kod "Suzaku". Menurut berita ini, telefon bimbit yang diberi nama kod Zhuque ini akan direka dengan konsep bersepadu, menggunakan kamera bawah skrin, dan dilengkapi dengan pemproses Qualcomm Snapdragon 8gen4 Jika rancangan itu tidak berubah, kita mungkin akan melihat ketibaannya pada tahun 2025 . Apabila saya melihat berita ini, saya fikir saya telah kembali pada tahun 2019 - pada masa itu, Xiaomi mengeluarkan telefon konsep Mi MIX Alpha, dan reka bentuk tanpa butang skrin sekeliling agak menakjubkan. Ini adalah kali pertama saya melihat daya tarikan telefon bimbit tanpa butang. Jika anda mahukan sekeping "kaca ajaib", anda mesti mematikan butangnya terlebih dahulu Dalam "The Biography of Steve Jobs", Jobs pernah menyatakan bahawa dia berharap telefon bimbit itu boleh menjadi seperti kepingan "kaca ajaib".
Buat pertama kalinya, ia bukan versi terbaharu telefon mudah alih siri Google Pixel 9 yang akan diprapasang dengan sistem Android 14.
Aug 01, 2024 pm 04:54 PM
Menurut berita pada 1 Ogos, media teknologi Android Headline menerbitkan catatan blog semalam (31 Julai), mengesahkan daripada saluran dalaman bahawa telefon mudah alih siri Google Pixel 9 akan dilengkapi dengan sistem Android 14 apabila meninggalkan kilang. Ini adalah kali pertama dalam sejarah keluaran telefon Google Pixel Biasanya, telefon Pixel dilengkapi dengan versi terbaharu Android Secara teorinya, siri Pixel 9 harus diprapasang dengan Android 15. Dilaporkan pada 30 Julai bahawa Google mengeluarkan kemas kini Android 15 Beta 4.1 Kemas kini adalah dalam skala kecil dan terutamanya menyelesaikan masalah ranap audio semasa panggilan pada peranti Pixel. Memandangkan skala kecil kemas kini ini, terdapat spekulasi bahawa versi rasmi Android 15 mungkin akan dilancarkan tidak lama lagi. Google biasanya mengeluarkan versi baharu Android antara Ogos dan September: Android
