Saya memiliki @media
pengaturan ini :
HTML :
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS :
@media screen and (min-width: 769px) {
/* STYLES HERE */
}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
@media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
Dengan pengaturan ini berfungsi pada iPhone tetapi tidak berfungsi di browser.
Apakah itu karena saya sudah memiliki device
meta, dan mungkin max-width:480px
sebaliknya?
css
mobile
media-queries
relibilen
sumber
sumber
@media screen and (min-width:769px){
gaya peramban normal Anda980px
bukan960
karena ukuran browser berakhir pada980px
.Jawaban:
Saya telah menemukan metode terbaik adalah menulis CSS default Anda untuk browser lama, seperti browser lama termasuk yaitu 5.5, 6, 7 dan 8. Tidak dapat membaca @ media. Ketika saya menggunakan @ media saya menggunakannya seperti ini:
Tetapi Anda dapat melakukan apa pun yang Anda suka dengan @media Anda, Ini hanyalah contoh dari apa yang saya temukan terbaik untuk saya ketika membangun gaya untuk semua browser.
Spesifikasi CSS iPad.
Juga! Jika Anda mencari kemampuan cetak yang dapat Anda gunakan
@media print{}
sumber
Masalah mendasarnya adalah menggunakan
max-device-width
vs biasamax-width
.Menggunakan kata kunci "perangkat" menargetkan dimensi fisik layar, bukan lebar jendela browser.
Sebagai contoh:
Melawan
sumber
Jika situs web pada perangkat kecil berperilaku seperti layar desktop maka Anda harus memasukkan meta tag ini ke header sebelumnya
Untuk kueri media, Anda dapat menetapkan ini sebagai
ini akan mencakup semua lebar ponsel / ponsel Anda
Untuk iPad dan iPad pro yang harus Anda gunakan
Jika Anda ingin menambahkan css untuk mode Lansekap Anda dapat menambahkan ini
dan (orientasi: lanskap)
sumber
Nilai yang benar untuk
content
atribut seharusnya termasukinitial-scale
:sumber
untuk beberapa iPhone Anda harus meletakkan viewport Anda seperti ini
sumber