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.

windows display resolution website Gear besi padat
sumber
kemungkinan duplikat dari Bagaimana Anda bisa mengambil screenshot dari seluruh halaman web?
Ƭᴇcʜιᴇ007
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.

Arman Bimatov
sumber
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.

Bob
sumber
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.

kamalam
sumber
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.

CharlieRB
sumber
1
ia hanya memiliki 1920 max
metal solid gear
0

Tambahkan resolusi layar khusus di panel kontrol kartu video Anda.

GENIEBEN
sumber
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

Anda dapat mencoba addon untuk Chrome: Resolution tester yang mendukung resolusi khusus :)

Skuli Axelson
sumber
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.

Doobeh
sumber
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!

bramchi
sumber