Apa cara terbaik untuk menguji halaman web pada resolusi yang lebih tinggi dari resolusi layar Anda saat ini?


10

Saya membuat situs web responsif di mana saya harus menguji rendering css, html, javascript halaman web saya pada resolusi 2400px sementara layar saya hanya 1900px.



Anda sadar bahwa Anda dapat mengubah ukuran jendela browser di luar resolusi layar Anda di sebagian besar sistem? Pindahkan mereka setengah dari layar lalu ubah ukuran perbatasan yang sekarang ada di tengah layar. Tidak berguna untuk penggunaan aktual, tetapi akan cukup untuk pengujian. Screenshot dari jendela lengkap ini diambil pada OS X dengan resolusi layar 1680x150.
Daniel Beck

@DanielBeck - aneh saya mencoba yang sama pada Chomre saya (Windows) tetapi tidak membentang di luar layar saya saat ini
metal gear solid

Ini benar-benar masalah dengan OS Anda yang mencoba mengakali Anda . Dapat bereproduksi dengan Safari pada Windows 7.
Daniel Beck

Milik saya adalah Windows 7
solid metal gear

Jawaban:


3

Di browser Chrome:

  1. Tekan F12. Ini akan membuka DevTools.

  2. Klik ikon pengaturan di sudut kanan bawah. Ini akan membuka Pengaturan DevTools.

  3. Pergi ke Override di menu sebelah kiri.

  4. Periksa Aktifkan dan Metrik Perangkat.

  5. Ketik resolusi layar

Saya selalu menggunakannya, sangat nyaman.


2

Jika Anda menekan Ctrl+ Shift+ Mdi versi Firefox terbaru, Anda akan memasuki Tampilan Desain Responsif , yang dapat mengubah ukuran viewport browser menjadi lebih besar dari ukuran layar yang sebenarnya. Anda juga dapat mengambil tangkapan layar dan mensimulasikan acara sentuh dari FF 26 dan seterusnya.

Cuplikan layar RDV
Klik untuk ukuran penuh

Anda mungkin merasa lebih mudah untuk mengubah ukuran setelah membuat jendela lebih kecil - Anda dapat menyeret sizers lebih lanjut dalam sekali jalan. Atau cukup masukkan preset khusus dari dropdown.


Apakah ada api untuk opsi ini? Untuk mengaktifkannya melalui kode js yang disuntikkan dari situs web atau dari dalam addon?
Kamal Reddy

@KamalReddy Saya tidak berpikir Anda akan dapat melakukannya dari dalam konteks konten (situs web), tetapi harus dimungkinkan dari konteks chrome (addon). Yah, bagaimanapun juga di masa depan . Mungkin Anda dapat mensimulasikan Ctrl + Shift + M?
Bob

1

Anda dapat mencoba situs web ini untuk menguji halaman web Anda dengan resolusi layar apa pun yang Anda pilih dari resolusi standar atau memasukkan resolusi kustom Anda. harap Anda menemukan garis-garis ini bermanfaat.


Diblokir oleh server proxy kami. Apakah itu penunjuk ke situs lain, atau apakah laman PHP itu adalah laman alat yang sebenarnya?
Luke Kanada

halaman PHP yang saya tambahkan di sini adalah halaman alat yang sebenarnya
kamalam

0

Pertanyaan ini mungkin lebih cocok untuk Webmaster tetapi saya akan mencoba dan menyarankan ViewLikeUs yang mana

memungkinkan Anda untuk melihat bagaimana situs web Anda terlihat dalam format resolusi paling populer.


1
ia hanya memiliki 1920 max
metal solid gear

0

Tambahkan resolusi layar khusus di panel kontrol kartu video Anda.


3
Resolusi lebih besar dari yang didukung oleh layar? Bisakah Anda memberikan detail lebih lanjut cara mengkonfigurasi ini dan seperti apa tampilannya?
Daniel Beck

@DanielBeck Tautan tutorial YouTube ini untuk kartu nVidia. Cukup mirip untuk ATI / AMD.
GENiEBEN

2
@ElGenieben Video itu secara eksplisit memperingatkan pada 0:39 bahwa Anda dapat merusak tampilan Anda dengan menetapkan resolusi yang terlalu tinggi.
Nicole Hamilton



0

Cukup ubah zoom pada browser Anda, ketika Anda memperkecil, pada dasarnya ukuran jendela Anda melaporkan lebar yang lebih besar ke aplikasi Anda.

contoh jsfiddle di sini , cukup klik pada tombol, lihat lebar pelaporannya, kemudian perkecil sedikit dan klik tombol yang sama - itu akan melaporkan ukuran yang lebih besar.


0

Coba pengaturan resolusi khusus di emulator perangkat di Google Chrome. Ini memberi Anda lebih banyak kontrol daripada menggunakan fungsi zoom browser.

Aktifkan emulator perangkat dan centang opsi 'zoom to fit'.

Masukkan resolusi secara manual hingga lebar 9999px (atau seret tepi layar yang diemulasi. Resolusi yang diemulasikan akan diskalakan agar sesuai dengan viewport Anda sendiri.

Anda dapat menjaga ketinggian resolusi tetap rendah karena Anda tetap dapat menggulir ke bawah. Dengan cara ini Anda dapat membuat inspektur tetap terbuka juga. Alur kerja yang bagus untuk pengembangan web!

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.