Temukan dimensi elemen halaman web

Panduan berikut dirancang untuk membantu Anda menentukan tata letak lebar tetap untuk perangkat tertentu. Jika konten Anda akan ditampilkan pada berbagai ukuran iPad, Anda dapat menargetkan aturan CSS dan gambar menggunakan kueri media yang ditargetkan pada perangkat tertentu atau membuat tata letak fluida berdasarkan persentase daripada lebar tetap tertentu.

  • Piksel perangkat keras, Rasio Pixel CSS & Perangkat Pixel
  • lebar tata letak
  • Gambar resolusi tinggi untuk retina
  • spesifik Perangkat
  • Dimensi Elemen Navigasi

Ketika Apple memperkenalkan tampilan retina di iPad dan iPhone, dimensi piksel dari perangkat ini sering secara signifikan lebih besar daripada yang paling banyak monitor ukuran penuh saat ukuran layar fisik perangkat baru ini jauh lebih kecil.

Untuk memungkinkan situs web untuk ditampilkan dalam cara yang dapat dibaca pada layar ini, Apple membuat konsep terpisah untuk piksel perangkat keras (kadang-kadang disebut sebagai piksel tampilan atau piksel layar) dan piksel perangkat lunak (yang kadang-kadang disebut piksel perangkat lunak).

Pixel perangkat keras adalah jumlah piksel tampilan individu (pada dasarnya titik cahaya) yang membentuk layar tertentu. Semakin banyak piksel perangkat keras individual yang dimiliki layar dalam ukuran layar tertentu, semakin tinggi resolusi dan tampilan yang lebih jelas akan terlihat.

Jika Anda mengemas lebih banyak piksel ke ruang yang lebih kecil, masing-masing piksel harus lebih kecil untuk pas - ini berarti bahwa ukuran piksel perangkat keras dapat bervariasi secara signifikan dari satu perangkat ke perangkat lain.

Piksel CSS, di sisi lain, dirancang untuk memiliki ukuran yang sama di seluruh perangkat. Ini memungkinkan tata letak dengan dimensi CSS spesifik yang akan ditampilkan secara konsisten melintasi layar dengan dimensi fisik yang serupa, tetapi jumlah piksel perangkat keras yang berbeda membuat layar itu.

untuk perangkat dengan layar resolusi tinggi, produsen mendefinisikan rasio perangkat piksel berdasarkan ukuran dan resolusi layar mereka. Rasio ini mendefinisikan berapa banyak piksel perangkat keras yang membentuk pixel CSS. Di semua iPad retina Apple sampai saat ini, setiap Piksel CSS terdiri dari 4 piksel perangkat keras (2 piksel perangkat keras dan 2 piksel perangkat keras lebar), yang diterjemahkan ke rasio perangkat piksel 2. iPad yang lebih tua, non-retina menggunakan perangkat Rasio piksel 1 jadi hardware piksel sama dengan piksel CSS untuk perangkat ini.

Untuk perangkat lain, Anda dapat menentukan lebar tata letak CSS standar dengan membagi dimensi piksel hardware horizontal dengan rasio perangkat piksel. Misalnya, iPad Pro 11 inci dalam lanskap memiliki resolusi pixel perangkat keras 2388 piksel lebar 1668 piksel. Membagi 2388 dengan 2 (rasio perangkat piksel untuk layar retina apa pun) menghasilkan lebar tata letak CSS standar 1194 piksel untuk digunakan sebagai lebar dasar untuk setiap konten yang dirancang untuk ditampilkan pada perangkat lanskap itu.

Jika Anda ingin menentukan lebar pixel CSS yang berbeda untuk tata letak Anda, Apple memungkinkan Anda untuk mengatur viewport khusus menggunakan tag Meta Viewport. Sementara tag viewport didukung dalam versi iOS dan iPados saat ini, ini dapat berubah dalam versi mendatang. Untuk alasan ini, kami biasanya merekomendasikan untuk mendasarkan tata letak Anda pada lebar piksel CSS standar perangkat jika memungkinkan.

Saat tata letak Anda harus didasarkan pada piksel CSS, Anda masih dapat menggunakan gambar beresolusi tinggi untuk layar retina. Ini bekerja dengan menggunakan gambar berdasarkan ukuran piksel perangkat keras layar, kemudian menggunakan inline HTML, CSS, Javascript atau kueri media untuk mengubah ukuran gambar ke dimensi Piksel CSS yang tepat menggunakan atribut 'lebar' dan 'tinggi'.

Untuk melanjutkan contoh iPad 11 inci di atas, jika Anda ingin mengatur gambar header lebar penuh, ini akan didefinisikan dalam HTML CSS atau inline sebagai memiliki lebar 1194 piksel. File gambar yang digunakan akan dua kali lipat (berdasarkan rasio piksel perangkat 2 untuk layar retina) dengan lebar aktual 2388 piksel.

  • semua - untuk semua jenis media
  • cetak - untuk printer
  • layar
  • untuk layar komputer, tablet dan telepon pintar
  • pidato - untuk pembaca layar yang "membaca" halaman keluar keras

Membuat situs web dengan tata letak yang mudah beradaptasi disebut desain web responsif. Dan kueri media CSS adalah salah satu bagian terpenting dari desain responsif. Pada artikel ini, kita akan melihat lebih dekat dengan kueri media dan cara menggunakannya di CSS.

Apa itu kueri media?

  • browser apa yang digunakan orang?
  • pada jenis perangkat apa?
  • Apa resolusi layar mereka?
  • Bagaimana Banyak ruang diambil oleh bilah alat browser?
  • Apa artinya bagi saya sebagai pengembang situs web?

Dengan bantuan CSS3 dan MediaQereries Anda dapat mengubah tata letak situs web Anda berdasarkan ukuran layar yang terdeteksi dari perangkat (baik itu layar komputer, tablet, ...). Tetapi apa pedoman dan praktik terbaik saat ini? Baca terus.

Perangkat & Resolusi, pertanyaan umum

Itu tergantung pada konten situs web Anda. Informasi yang sangat penting harus 'di atas lipatan' yang berarti: terlihat tanpa gulir. Jadi selalu baik untuk mengetahui ketinggian yang tersedia pada perangkat yang paling banyak digunakan, untuk menghindari memotong spanduk di tengah atau menempatkan tombol panggilan-ke-tindakan yang sangat penting. Hy tidak menargetkan perangkat?

Situs Web Desain Ulang di Bangalore Revamp Situs Web

Mendesain ulang situs web berarti rekonseptualisasi dan mendesain ulang layanan situs web dan aplikasi yang ada. Situs web didesain ulang meninggalkan pengguna informasi dan terkesan dengan citra perusahaan Anda.

Situs Web Desain Ulang di Bangalore Revamp Situs Web
Kami menggunakan cookie
Kami menggunakan cookie untuk memastikan bahwa kami memberikan Anda pengalaman terbaik di situs web kami. Dengan menggunakan situs web Anda menyetujui penggunaan cookie kami.
Izinkan cookie.