Aşağıdaki kodları belli bir proje için kullanmıştım şu an ihtiyaç duymuyorum lazım olan kişiler burayı kullanabilir (yatay mod için dikey mod istiyorsanız konuya yanıt verebilirsiniz) şimdiden iyi kullanmalar iyi kodlamalar 
Otomatik bir sistem istiyorsanız da aşağıdaki JS kodunu kullanabilirsiniz kod örnektir kendi işinize göre düzenleyebilirsiniz...
CSS:
@media(max-width: 641px) and (min-width: 639px) and (max-height: 361px) and (min-height: 359px) {
/* BlackBerry Z30, Galaxy Note 3, Galaxy SIII, LG Optimus L70 için Mobil Entegrasyon */
}
@media(max-width: 897px) and (min-width: 895px) and (max-height: 415px) and (min-height: 414px) {
/* iPhone XR, Samsung Galaxy A70 için Mobil Entegrasyon */
}
@media (max-width: 668px) and (min-width: 666px) and (max-height: 376px) and (min-height: 374px) {
/* iPhone SE, Samsung Galaxy A50 için Mobil Entegrasyon */
}
@media(max-width: 813px) and (min-width: 811px) and (max-height: 376px) and (min-height: 374px) {
/* iPhone X, Samsung Galaxy S10 için Mobil Entegrasyon */
}
@media(max-width: 845px) and (min-width: 843px) and (max-height: 391px) and (min-height: 389px) {
/* iPhone 12 Pro, Samsung Galaxy S20 için Mobil Entegrasyon */
}
@media (max-width: 933px) and (min-width: 931px) and (max-height: 431px) and (min-height: 429px) {
/* iPhone 14 Pro Max, Samsung Galaxy Note 20 Ultra için Mobil Entegrasyon */
}
@media(max-width: 916px) and (min-width: 914px) and (max-height: 413px) and (min-height: 411px) {
/* Pixel, Samsung Galaxy S20 Ultra, OnePlus 8 Pro için Mobil Entegrasyon */
}
@media(max-width: 741px) and (min-width: 739px) and (max-height: 361px) and (min-height: 359px) {
/* Samsung Galaxy S8+, HTC U11 için Mobil Entegrasyon */
}
@media(max-width: 659px) and (min-width: 658px) and (max-height: 321px) and (min-height: 319px) {
/* Samsung Galaxy S9+, Xperia XZ2 Compact için Mobil Entegrasyon */
}
@media(max-width: 641px) and (min-width: 649px) and (max-height: 385px) and (min-height: 383px) {
/* LG Optimus L70, Alcatel 3X için Mobil Entegrasyon */
}Otomatik bir sistem istiyorsanız da aşağıdaki JS kodunu kullanabilirsiniz kod örnektir kendi işinize göre düzenleyebilirsiniz...
JavaScript:
function applyDeviceClass() {
const width = window.innerWidth;
const height = window.innerHeight;
const body = document.body;
// Önceden eklenmiş tüm cihaz sınıflarını kaldır.
body.className = '';
// Cihaz sınıflarını ekle.
if (width <= 641 && width >= 639 && height <= 361 && height >= 359) {
body.classList.add('device-blackberry-z30');
} else if (width <= 897 && width >= 895 && height <= 415 && height >= 414) {
body.classList.add('device-galaxy-note3');
} else if (width <= 668 && width >= 666 && height <= 376 && height >= 374) {
body.classList.add('device-iphone-se');
} else if (width <= 813 && width >= 811 && height <= 376 && height >= 374) {
body.classList.add('device-iphone-x');
} else if (width <= 845 && width >= 843 && height <= 391 && height >= 389) {
body.classList.add('device-iphone-12-pro');
} else if (width <= 933 && width >= 931 && height <= 431 && height >= 429) {
body.classList.add('device-iphone-14-pro-max');
} else if (width <= 916 && width >= 914 && height <= 413 && height >= 411) {
body.classList.add('device-pixel');
} else if (width <= 741 && width >= 739 && height <= 361 && height >= 359) {
body.classList.add('device-galaxy-s8-plus');
} else if (width <= 659 && width >= 658 && height <= 321 && height >= 319) {
body.classList.add('device-galaxy-s9-plus');
} else if (width <= 641 && width >= 649 && height <= 385 && height >= 383) {
body.classList.add('device-lg-optimus-l70');
}
}
// Ekran boyutunu kontrol et ve uygun sınıfı uygula.
applyDeviceClass();
// Ekran boyutu değiştiğinde yeniden kontrol et.
window.addEventListener('resize', applyDeviceClass);
Son düzenleme:
