Jadual Kandungan
回复讨论(解决方案)
Rumah hujung hadapan web html tutorial 求大神解答 关于判断是手机客户端还是平板客户端的问题。_html/css_WEB-ITnose

求大神解答 关于判断是手机客户端还是平板客户端的问题。_html/css_WEB-ITnose

Jun 24, 2016 pm 12:00 PM
penghakiman Tuhan yang besar pelanggan rata jawab

一段JS代码,一段HTML+CSS代码,运行之前,如何判断是在手机上运行的,还是在平板电脑上运行的?  
---- 如果是获取手机或平板的设备型号来判断,如何JS来判断?


回复讨论(解决方案)

可以在后端判断,然后输出特征字符串,然后这个字符串组合前端样式。
根据客户端来判断,会造成各种资源的浪费或页面显示效果的各种问题。
以下是判断手机与pc端的,然后按照要求,在判断出移动端之后,在判断是平板还是手机。
具体的判断的方式也可以使用这种:
http://www.csdn.net/article/2013-01-10/2813567-mobile-detect-open-source-class
大概思路就是这样

public function index(){    if($this->is_mobile()){        $data['home'] = 'wap';    } else {        $data['home'] = 'www';    }}protected function is_mobile(){    $user_agent    = $_SERVER['HTTP_USER_AGENT'];    $mobile_agents = Array("240x320", "acer", "acoon", "acs-", "abacho", "ahong", "airness", "alcatel", "amoi", "android", "anywhereyougo.com", "applewebkit/525", "applewebkit/532", "asus", "audio", "au-mic", "avantogo", "becker", "benq", "bilbo", "bird", "blackberry", "blazer", "bleu", "cdm-", "compal", "coolpad", "danger", "dbtel", "dopod", "elaine", "eric", "etouch", "fly ", "fly_", "fly-", "go.web", "goodaccess", "gradiente", "grundig", "haier", "hedy", "hitachi", "htc", "huawei", "hutchison", "inno", "ipad", "ipaq", "ipod", "jbrowser", "kddi", "kgt", "kwc", "lenovo", "lg ", "lg2", "lg3", "lg4", "lg5", "lg7", "lg8", "lg9", "lg-", "lge-", "lge9", "longcos", "maemo", "mercator", "meridian", "micromax", "midp", "mini", "mitsu", "mmm", "mmp", "mobi", "mot-", "moto", "nec-", "netfront", "newgen", "nexian", "nf-browser", "nintendo", "nitro", "nokia", "nook", "novarra", "obigo", "palm", "panasonic", "pantech", "philips", "phone", "pg-", "playstation", "pocket", "pt-", "qc-", "qtek", "rover", "sagem", "sama", "samu", "sanyo", "samsung", "sch-", "scooter", "sec-", "sendo", "sgh-", "sharp", "siemens", "sie-", "softbank", "sony", "spice", "sprint", "spv", "symbian", "tablet", "talkabout", "tcl-", "teleca", "telit", "tianyu", "tim-", "toshiba", "tsm", "up.browser", "utec", "utstar", "verykool", "virgin", "vk-", "voda", "voxtel", "vx", "wap", "wellco", "wig browser", "wii", "windows ce", "wireless", "xda", "xde", "zte");    $is_mobile     = false;    foreach($mobile_agents as $device){        if(stristr($user_agent, $device)){            $is_mobile = true;            break;        }    }    return $is_mobile;}    
Salin selepas log masuk
Salin selepas log masuk

<link rel="stylesheet" type="text/css" href="css/<?php echo $home; ?>_home.css" media="all"/<script type="text/javascript" src="js/init/<?php echo $home; ?>_home.init.js"></script>
Salin selepas log masuk
Salin selepas log masuk

最后输出的字符串是这样的:

<link rel="stylesheet" type="text/css" href="css/www_home.css" media="all"/><link rel="stylesheet" type="text/css" href="css/wap_home.css" media="all"/>
Salin selepas log masuk

这个www_home.css与wap_home.css是准备好的不同终端的样式。js也是同样的道理。
参考一下。

可以通过js来获取用的ua(user agent)信息。参考代码:

<script type="text/javascript">    $(function(){   var userAgent = navigator.userAgent;   alert(userAgent)   var index = userAgent.indexOf("Android")   if(index >= 0){     var androidVersion = parseFloat(userAgent.slice(index+8));      if(androidVersion<3){      // 版本小于3的事情      alert('版本小于3');     }   }  });  </script>  
Salin selepas log masuk

最好是在后端做判断,初始化对应的css和js

可以在后端判断,然后输出特征字符串,然后这个字符串组合前端样式。
根据客户端来判断,会造成各种资源的浪费或页面显示效果的各种问题。
以下是判断手机与pc端的,然后按照要求,在判断出移动端之后,在判断是平板还是手机。
具体的判断的方式也可以使用这种:
http://www.csdn.net/article/2013-01-10/2813567-mobile-detect-open-source-class
大概思路就是这样

public function index(){    if($this->is_mobile()){        $data['home'] = 'wap';    } else {        $data['home'] = 'www';    }}protected function is_mobile(){    $user_agent    = $_SERVER['HTTP_USER_AGENT'];    $mobile_agents = Array("240x320", "acer", "acoon", "acs-", "abacho", "ahong", "airness", "alcatel", "amoi", "android", "anywhereyougo.com", "applewebkit/525", "applewebkit/532", "asus", "audio", "au-mic", "avantogo", "becker", "benq", "bilbo", "bird", "blackberry", "blazer", "bleu", "cdm-", "compal", "coolpad", "danger", "dbtel", "dopod", "elaine", "eric", "etouch", "fly ", "fly_", "fly-", "go.web", "goodaccess", "gradiente", "grundig", "haier", "hedy", "hitachi", "htc", "huawei", "hutchison", "inno", "ipad", "ipaq", "ipod", "jbrowser", "kddi", "kgt", "kwc", "lenovo", "lg ", "lg2", "lg3", "lg4", "lg5", "lg7", "lg8", "lg9", "lg-", "lge-", "lge9", "longcos", "maemo", "mercator", "meridian", "micromax", "midp", "mini", "mitsu", "mmm", "mmp", "mobi", "mot-", "moto", "nec-", "netfront", "newgen", "nexian", "nf-browser", "nintendo", "nitro", "nokia", "nook", "novarra", "obigo", "palm", "panasonic", "pantech", "philips", "phone", "pg-", "playstation", "pocket", "pt-", "qc-", "qtek", "rover", "sagem", "sama", "samu", "sanyo", "samsung", "sch-", "scooter", "sec-", "sendo", "sgh-", "sharp", "siemens", "sie-", "softbank", "sony", "spice", "sprint", "spv", "symbian", "tablet", "talkabout", "tcl-", "teleca", "telit", "tianyu", "tim-", "toshiba", "tsm", "up.browser", "utec", "utstar", "verykool", "virgin", "vk-", "voda", "voxtel", "vx", "wap", "wellco", "wig browser", "wii", "windows ce", "wireless", "xda", "xde", "zte");    $is_mobile     = false;    foreach($mobile_agents as $device){        if(stristr($user_agent, $device)){            $is_mobile = true;            break;        }    }    return $is_mobile;}    
Salin selepas log masuk
Salin selepas log masuk

<link rel="stylesheet" type="text/css" href="css/<?php echo $home; ?>_home.css" media="all"/<script type="text/javascript" src="js/init/<?php echo $home; ?>_home.init.js"></script>
Salin selepas log masuk
Salin selepas log masuk


学习了

谢谢2楼和3楼,我测试下。有没有不是PHP代码...?

   // Tablet   private static Regex regexTablet = new Regex("^.*iPad.*$|^.*tablet.*$|^.*Android\\s3.*$|^(?!.*Mobile.*).*Android.*$", RegexOptions.IgnoreCase);   // Mobile   private static Regex regexMobile = new Regex("^.*(iPhone|iPod|Android.*Mobile|Windows\\sPhone|IEMobile|BlackBerry|Mobile).*$", RegexOptions.IgnoreCase);....HttpContext httpContext = HttpContext.Current;string ua = httpContext.Request.UserAgent;if (regexTablet.IsMatch(ua)){      return DISPLAY_MODE_PC;}if (regexMobile.IsMatch(ua)){      return DISPLAY_MODE_MOBILE;}
Salin selepas log masuk


这两个正则差不多了~~

感谢6楼,有没有纯JS代码能够判断出是在手机上运行的,还是在平板电脑上运行的?

js不能跑正则么?

直接匹配一下那两个正则就差不多了~~

感谢6楼,有没有纯JS代码能够判断出是在手机上运行的,还是在平板电脑上运行的?

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pelanggan VMware Horizon membeku atau terhenti semasa menyambung [Betulkan] Pelanggan VMware Horizon membeku atau terhenti semasa menyambung [Betulkan] Mar 03, 2024 am 09:37 AM

Apabila menyambung ke VDI menggunakan klien VMWareHorizon, kami mungkin menghadapi situasi di mana aplikasi membeku semasa pengesahan atau blok sambungan. Artikel ini akan meneroka isu ini dan menyediakan cara untuk menyelesaikan situasi ini. Apabila klien VMWareHorizon mengalami masalah pembekuan atau sambungan, terdapat beberapa perkara yang boleh anda lakukan untuk menyelesaikan isu tersebut. Betulkan klien VMWareHorizon membeku atau tersekat semasa menyambung Jika klien VMWareHorizon membeku atau gagal menyambung pada Windows 11/10, ikuti penyelesaian yang dinyatakan di bawah: Semak sambungan rangkaian Mulakan semula klien Horizon Semak status pelayan Horizon Kosongkan cache klien Betulkan Ho

Pusat pembelajaran dan hiburan serba boleh - pengalaman praktikal Lenovo Xiaoxin Pad Pro 12.7 Comfort Edition baharu Pusat pembelajaran dan hiburan serba boleh - pengalaman praktikal Lenovo Xiaoxin Pad Pro 12.7 Comfort Edition baharu Aug 05, 2024 pm 04:28 PM

Terima kasih kepada netizen Nobilta kerana menghantar petunjuk! Hari ini, dengan perkembangan pesat perkakasan pintar, apabila kita berfikir tentang mengutamakan produktiviti, buku nota mesti menjadi topik yang tidak boleh dielakkan. Walau bagaimanapun, apabila prestasi seni bina Arm menjadi semakin hebat, tablet antara telefon mudah alih dan komputer riba secara beransur-ansur menjadi salah satu pilihan produktiviti untuk lebih ramai orang. Sebagai sebuah gergasi lama, Lenovo sudah pasti menempati kedudukan dominan dalam bidang PC Bolehkah tablet Lenovo yang baru dilancarkan Xiaoxin PadPro 2025 memikul "kemuliaan abang" dan menjadi bahagian penting dalam ekologi Lenovo dan berfungsi sebagai "pelajar. party"?", alat produktiviti untuk "menewaskan pekerja"? Mari kita rasainya bersama. Membuka Kotak & Penampilan: Kali ini saya menerima Lenovo Xiaoxin PadPro 12.7 (generasi kedua) Edisi Keselesaan +

Telefon baharu Lenovo TB321FU muncul di GeekBench, dijangka menjadi tablet skrin kecil Savior Y700 2024 Telefon baharu Lenovo TB321FU muncul di GeekBench, dijangka menjadi tablet skrin kecil Savior Y700 2024 Aug 12, 2024 pm 04:31 PM

Menurut berita dari laman web ini pada 12 Ogos, mesin Lenovo baharu dengan nombor model TB321FU muncul di GeekBench Mesin itu mendapat 2209 dalam teras tunggal dan 6509 dalam pelbagai teras Maklumat CPU adalah serupa dengan pemproses Qualcomm Snapdragon 8Gen3. Tapak ini mendapati bahawa mesin Lenovo TB321FU baharu telah diprapasang dengan sistem Android 14 dan dilengkapi dengan storan dan storan 12GB. Menurut blogger @digitalchatstation, mesin itu dijangka menjadi tablet skrin kecil Lenovo Savior Y700, dilengkapi pemproses Qualcomm Snapdragon 8Gen3 dan sistem ZUI16.1 yang telah dipasang sebelumnya. Tablet Android 2023 Savior Y700 Lenovo akan dikeluarkan pada Julai 2023. Ia dilengkapi dengan pemproses Snapdragon 8+, dilengkapi dengan skrin 8.8-inci 2.5K144Hz, seberat 348g, tebal 7.6mm, dan dilengkapi dengan dua Typ

Tablet Lenovo Savior Y700 2023 melancarkan kemas kini ZUI 16.0.336: naik taraf kepada Android 14, sokong Xiaoxin Wireless Keyboard Air Tablet Lenovo Savior Y700 2023 melancarkan kemas kini ZUI 16.0.336: naik taraf kepada Android 14, sokong Xiaoxin Wireless Keyboard Air Aug 11, 2024 pm 04:41 PM

Menurut berita dari laman web ini pada 11 Ogos, model 2023 tablet Lenovo Savior Y700 telah dikemas kini kepada versi ZUI16.0.336, yang menaik taraf lapisan bawah sistem Android 14 dan menambah sokongan untuk Xiaoxin Wireless Keyboard Air. Butiran kemas kini yang dilampirkan pada tapak ini adalah seperti berikut: Peningkatan versi utama Android 14 menyerlahkan reka bentuk warna baharu: mengguna pakai sistem warna baharu untuk meningkatkan pengalaman visual mengoptimumkan kesan kabur Gaussian untuk membantu anda memfokus dengan lebih mudah Pembantu panggilan video yang baharu ditambahkan : persidangan dalam talian atau semasa panggilan video, pembantu panggilan video boleh membantu anda mengakses tetapan peningkatan potret dan bunyi dengan cepat Menyokong Lenovo Xiaoxin Wireless Keyboard Air: menyokong gandingan pantas papan kekunci dan berbilang kekunci pintasan mengoptimumkan permainan membeku dan rakaman skrin terhenti beberapa senario permainan imbasan AI pengoptimuman pengguna Dayton

Panduan Pembangunan Klien PHP MQTT Panduan Pembangunan Klien PHP MQTT Mar 27, 2024 am 09:21 AM

MQTT (MessageQueuingTelemetryTransport) ialah protokol penghantaran mesej ringan yang biasa digunakan untuk komunikasi antara peranti IoT. PHP ialah bahasa pengaturcaraan sisi pelayan yang biasa digunakan yang boleh digunakan untuk membangunkan klien MQTT. Artikel ini akan memperkenalkan cara menggunakan PHP untuk membangunkan klien MQTT dan memasukkan kandungan berikut: Konsep asas protokol MQTT Pemilihan dan contoh penggunaan perpustakaan klien PHPMQTT: Menggunakan klien PHPMQTT untuk menerbitkan dan

Tablet Teclast M50 Mini ada di sini: Skrin IPS 8.7 inci, bateri 5000mAh Tablet Teclast M50 Mini ada di sini: Skrin IPS 8.7 inci, bateri 5000mAh Apr 04, 2024 am 08:31 AM

Menurut berita pada 3 April, komputer tablet M50 Mini Taipower yang akan datang ialah peranti dengan fungsi yang kaya dan prestasi yang berkuasa. Tablet kecil 8 inci baharu ini dilengkapi dengan skrin IPS 8.7 inci, memberikan pengguna pengalaman visual yang sangat baik. Reka bentuk badan logamnya bukan sahaja cantik tetapi juga meningkatkan ketahanan peranti. Dari segi prestasi, M50Mini dilengkapi dengan pemproses lapan teras Unisoc T606, yang mempunyai dua teras A75 dan enam teras A55, memastikan pengalaman berjalan yang lancar dan cekap. Pada masa yang sama, tablet ini juga dilengkapi dengan penyelesaian storan 6GB+128GB dan menyokong pengembangan memori 8GB, yang memenuhi keperluan pengguna untuk storan dan berbilang tugas. Dari segi hayat bateri, M50Mini dilengkapi dengan bateri 5000mAh dan menyokong Ty

Bagaimana untuk menyelesaikan masalah bahawa halaman web Baidu Netdisk tidak dapat memulakan klien? Bagaimana untuk menyelesaikan masalah bahawa halaman web Baidu Netdisk tidak dapat memulakan klien? Mar 13, 2024 pm 05:00 PM

Apabila ramai rakan memuat turun fail, mereka mula-mula akan menyemak imbas di halaman web dan kemudian memindahkan kepada klien untuk memuat turun. Tetapi kadangkala pengguna akan menghadapi masalah bahawa halaman web Baidu Netdisk tidak boleh memulakan klien. Sebagai tindak balas kepada masalah ini, editor telah menyediakan penyelesaian untuk anda menyelesaikan masalah yang halaman web Baidu Netdisk tidak boleh memulakan pelanggan yang memerlukan boleh merujuk kepadanya. Penyelesaian 1. Mungkin Baidu Netdisk bukan versi terkini Buka klien Baidu Netdisk secara manual, klik butang tetapan di penjuru kanan sebelah atas, dan kemudian klik naik taraf versi. Jika tiada kemas kini, gesaan berikut akan muncul Jika terdapat kemas kini, sila ikut gesaan untuk mengemas kini. 2. Program perkhidmatan pengesanan Baidu Cloud Disk mungkin dilumpuhkan secara manual atau menggunakan perisian keselamatan untuk melumpuhkan program perkhidmatan pengesanan Baidu Cloud Disk secara automatik. Sila semak

Parameter tablet OPPO Pad 3 terdedah: Pemproses Snapdragon 8 Gen 3 dipasangkan dengan skrin LCD 12.1 inci Parameter tablet OPPO Pad 3 terdedah: Pemproses Snapdragon 8 Gen 3 dipasangkan dengan skrin LCD 12.1 inci Jun 05, 2024 pm 01:44 PM

Menurut berita dari laman web ini pada 16 Mei, blogger @digitalchat.com baru-baru ini berkongsi satu set parameter utama produk tablet baharu Berdasarkan pendedahan sebelum ini, ia dijangka OPPOPad3. Ringkasan laman web ini adalah seperti berikut: Skrin: 12.1-inci 3K7:5 LCD, resolusi 3000*2120p, 304PPI, kecerahan 900nit Imej: Prestasi 8Mp/13Mp: Snapdragon 8Gen3+16GB+512GB Bateri: 9510mAh; caj pantas berwayar; lain-lain : antara muka USB3.2Gen1, pen pintar Pencil2, Dolby Vision, Dolby Atmos, pengecaman muka 2D ▲ Penghargaan gambar di tapak ini: OPPOPad2 Sebagai rujukan, OPPOPad2 telah dikeluarkan pada Mac 2023. Tablet ini

See all articles