به وبلاگ برنامه نویسی خوش آمدید.
برنامه نویس وببه وبلاگ برنامه نویسی خوش آمدید.
برنامه نویس وبدرباره من
سلام ، من محمدرضا هستم ، و اهل راوند کاشان. برنامه نویس وبسایت هستم . اگر میخواهید سایتی طراحی کنید با من تماس بگیرید ، می تونید توی وبلاگ بهم پیام بدید .
متشکرم.
ادامه...
تشخیص نمایشگر لمسی در css
یه موقع پیش میاد نمایشگر شما لمسی هست برای همین ماوسی ندارید که hover بشه و مثلاً یک عنصری ظاهر بشه. برای همین مثلاً توی نسخه ی موبایل با دستور مدیا کوئری میاید و اون عنصر رو ظاهر می کنید. ولی یه بارم هست که نمایشگر بزرگ هست ولی لمسی هست ، مثلاً نمایشگر ipad pro عرضش 1024 پیکسل هست و نمایشگر crt هم داریم که عرضش 1024 هست . پس نیاز داریم که با دستوری این موضوع رو بفهمیم.
برای حل این مشکل من از css کمک گرفتم.
اگر بخواهید کاری فقط در نمایشگر لمسی انجام بشه دستور خودتون رو داخل دستور زیر قرار بدید:
@media (hover: none) {
}
ولی اگر بخواهید کاری فقط در نمایشگر های غیر لمسی انجام بشه دستورات خودتون رو داخل دستور زیر قرار بدید:
@media (hover: hover) {
}
دستورات بالا توی مرورگرهای سفری دسکتاپ 5.1.7 و اکسپلورر 11.0.29 کار نکرد ولی توی فایرفاکس و نسخه ی موبایل ، سفری و کروم کار کرد.
پایین این صفحه هم مرورگرهایی که از این دستورات پشتیبانی می کنند رو نوشته.
کد های زیر را در یک فایل html ذخیره کنید:
<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>نمایشگر لمسی</title>
<style>
/* http://barnamenevisi.blogsky.com */
.others,.touch{
font-family:tahoma;
font-size:2em;
display:none;
}
@media (hover: hover) {
.others{
display:block;
}
}
@media (hover: none) {
.touch{
display:block;
}
}
</style>
</head>
<body>
<p class="touch">نمایشگر لمسی</p>
<p class="others">سایر</p>
</body>
</html>
برای اینکه ببینید در نمایشگر لمسی به چه شکل کار می کنه توی مرورگر کروم دکمه های ctrl shift i را با هم بگیرید.
منتظر نظراتتون هستم.
مطالب ما را در کانال تلگرامی به آدرس زیر دنبال کنید:
