Bagaimana cara mensimulasikan layar resolusi yang lebih tinggi? [Tutup]

95

Adakah cara bagi peramban untuk menguji situs web saya dalam resolusi yang lebih tinggi dari layar saya?

Misalnya: Saya memiliki layar 1440 x 900, dan saya ingin menguji situs web dalam 1920 x 1200, 1920 x 1080, dll.

html css resolution HappyDeveloper
sumber
@deceze sebenarnya itu saran yang sangat bagus. Inti dari hal-hal seperti 960.gs yang muncul adalah karena jika Anda bekerja dengan ukuran piksel, desain Anda terlihat sama di mana-mana, hanya membutuhkan jumlah real estat layar yang berbeda berdasarkan resolusi layar. Tidak perlu menguji grafis yang berulang secara horizontal dalam resolusi tinggi selama Anda dapat melihat pengulangan 2 dan sedikit penuh untuk memastikan setiap jahitannya sejajar. Atau Anda bisa menggunakan prinsip jangkrik untuk menghasilkan sesuatu yang lebih menarik.
Endophage
1
@ Endophage: Saya tidak setuju. Membuat tata letak yang berubah-ubah dengan benar sering kali memberikan hasil yang lebih baik, misalnya preferensi ukuran font pengguna. Melihat hal yang sama di mana-mana tidaklah penting, itu hanya mengintip piksel.
Anda
@Anda Saya belum melihat tata letak yang berubah-ubah yang mengubah ukuran font. Perhatikan alasan mengapa lebar piksel tetap bagus adalah karena mata manusia berjuang untuk memindai garis dengan panjang tertentu (saya yakin telah ditemukan sekitar 20 kata dengan ukuran font sekitar 12px, Anda dapat mencarinya sendiri). Jika Anda berbicara tentang turun ke resolusi ponsel, itu cerita yang berbeda tetapi jika Anda berbicara tentang resolusi desktop / laptop, jika saya hanya memiliki layar pantat besar dengan resolusi tinggi dan mengubah ukuran jendela, saya secara efektif menguji resolusi yang berbeda.
Endophage
1
@ Endophage: Karenanya kebutuhan untuk menggunakan 40em(atau ukuran serupa), bukan 960px, sebagai lebar Anda. Piksel tidak akan diskalakan ketika saya memutuskan ukuran font 12px Anda terlalu kecil untuk saya dan tekan Cmd- +. Selain itu, jendela browser saya hampir 960px apa adanya.
Anda
@Anda sebenarnya, piksel akan diskalakan saat Anda menekan Ctrl/Cmd +karena ini adalah fungsi zoom. Anda dapat mencobanya di sini di SO. Bagian konten utama memiliki lebar 960 piksel. Menggunakan sesuatu seperti 40em tidak akan menyesuaikan dengan resolusi layar. Menggunakan emukuran relatif terhadap ukuran font dari elemen induk yang diwarisi hingga 1em / 16px di tingkat atas kecuali diganti (dan maaf, seharusnya 12pt bukan px dalam komentar saya sebelumnya). Baca: kyleschaeffer.com/best-practices/…
Endophage

Jawaban:

76

[Sunting: Periksa alat pengembang browser Anda terlebih dahulu! Seperti yang ditunjukkan @SkylarIttner di komentar, alat untuk pengujian desain responsif telah diluncurkan sejak di sebagian besar browser sejak solusi di bawah ini diposting. Mereka sepertinya adalah opsi terbaik / termudah sekarang.]

Anda dapat, mengoreksi saya jika saya salah, cukup buat iframe dengan style="desired width & height"dan src="your/test.site"sebagai anak tunggal <body>. Harus menampilkan situs seolah-olah resolusi adalah lebar / tinggi yang ditentukan dan menghasilkan bilah gulir untuk memeriksanya.

Tidak senyaman menggunakan pihak ketiga, harus menyiapkannya sendiri, tetapi memiliki keuntungan karena dapat menguji secara lokal tanpa koneksi internet.

Cody Crumrine
sumber
5
Mengapa ... Saya harus mengatakan, itu jenius. +1
Mafia
Tentu saja! Terima kasih! ^^
Oskar Duveborn
Saya tidak bisa cukup berterima kasih!
Rahman Sharif
1
Terima kasih untuk semua umpan balik positifnya. Senang rasanya mengetahui saat sesuatu bermanfaat.
Cody Crumrine
1
Jika bisa membantu siapa saja, Ini contoh kode untuk melakukan apa yang disarankan @Cody Crumrine dan merupakan Genius !! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>
Stuart
28

Solusi ini jauh lebih cepat daripada yang diusulkan di atas:

http://www.infobyip.com/testwebsiteresolution.php

Ini tidak serbaguna seperti browserhots.org tetapi lebih cepat (beberapa detik vs antrian 45 menit).

Kyle
sumber
Ini bukanlah jawaban yang buruk. Namun, situs itu sama sekali tidak menyediakan apa pun yang tidak dapat Anda lakukan sendiri hanya dengan mengubah ukuran jendela browser di komputer desktop mana pun. IMHO, tautan di halaman itu untuk tablet & ponsel sama sekali tidak berguna ... karena pada layar iPod yang kecil, situs saya yang berukuran 1000 piksel secara otomatis diubah ukurannya oleh Mobile Safari untuk menampilkan dengan sangat baik.
Sparky
4
@ Sparky672, Saya pribadi tidak dapat mengubah ukuran browser saya menjadi lebih besar dari resolusi layar saya. OP meminta untuk melihat 1920 pada 1440. Mungkin ada cara, tapi semudah solusi infobyip? Permintaan maaf jika saya mengabaikan sesuatu yang jelas (saya merasa seperti saya mungkin).
Kyle
2
Terima kasih @ Sparky672 dan tidak ada masalah. Tetapi bukankah Anda harus menghapus komentar Anda "situs itu sama sekali tidak memberikan apa pun yang tidak dapat Anda lakukan sendiri hanya dengan mengubah ukuran jendela browser di komputer desktop mana pun" karena itu tidak benar?
Kyle
1
@ Sparky672, bagaimana dengan vertikal?
Kyle
1
Saya menggunakan vertikal untuk melihat apa yang termasuk di paro atas dan bawah. Saya menggabungkannya dengan StatsCounter dan MouseFlow untuk melihat berapa persentase penonton yang melihat apa. Aku mencintaimu Sparky! Saya pikir Anda salah membaca nada saya. Dan saya ingin membantu. Tidak ada yang akan melihat solusi yang saya berikan dengan 0 suara dan daftar komentar. Tapi oh baiklah ...
Kyle
9

Beberapa ide:

Gunakan zoom browser, zoom 1024x768 50% = resolusi simulasi 2048x1536, saya tahu Chrome mengubah ukuran gambar dan sejenisnya. Hal-hal menjadi sulit untuk dibaca, tetapi saya berasumsi Anda sedang menguji penempatan dan semacamnya.

Anda juga dapat menggunakan beberapa program tangkapan layar untuk mengambil tangkapan layar resolusi yang lebih tinggi dari biasanya (fireshot di Firefox biarkan saya melakukan ini, tetapi memiliki masalah memori dengan resolusi yang sangat tinggi, dan tidak gratis lagi).

StrangeWill
sumber
6

Salah satu solusinya, mungkin berlebihan, akan menggunakan Xvfb : atur resolusi dan kedalaman warna yang diinginkan, muat halaman Anda di browser dan ambil tangkapan layar.

Eugen Constantin Dinca
sumber
4

Coba viewlike.us atau screen-resolution.com . Tidak semua resolusi yang mungkin tetapi paling tidak yang paling umum.

Saya belum mencobanya tetapi tampaknya cukup mudah.

Eddie Cheng
sumber
resolusi layar menampilkan ini: "Resolusi Layar Anda terlalu kecil Pop-up yang Anda pilih terlalu besar untuk resolusi layar yang Anda gunakan. Resolusi layar Anda adalah 1440 piksel kali 900 piksel. Jendela pop-up yang Anda coba buka adalah 1920 piksel kali 1200. "
HappyDeveloper
tampilan seperti kami melempar ini: "Terlarang Anda tidak memiliki izin untuk mengakses / di server ini. Selain itu, kesalahan 404 Tidak Ditemukan ditemukan saat mencoba menggunakan ErrorDocument untuk menangani permintaan. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Server di viewlike.us Port 80 "
HappyDeveloper
2

Meskipun ini tidak akan memberi tahu Anda resolusi pasti pengujian Anda, Anda dapat menggunakan zoomalat di Chrome atau FF untuk memperkecil. Ini akan memberikan gambaran yang cukup akurat tentang tampilan situs pada layar beresolusi tinggi.

Jason Gennaro
sumber
2

Jika Anda tidak keberatan hanya dengan melihat tangkapan layar statis situs Anda, saya akan merekomendasikan http://browsershots.org/

Mereka memberi Anda opsi untuk melihat tangkapan layar situs Anda di hampir semua kombinasi browser / OS, termasuk kemampuan untuk menentukan ukuran layar, ditambah sejumlah besar opsi lainnya.

Layak bookmark.

Spudley
sumber
1

Anda mungkin ingin mencoba wkhtmltoimage , yang dapat mengambil screenshot dengan resolusi yang berubah-ubah.

Selain itu, di KDE4 dimungkinkan untuk memperbesar jendela melebihi ukuran layar. Saya rasa saya telah melihatnya di Windows 7 juga. Tidak yakin dengan OS lain.

pengguna123444555621
sumber
1

IE9 memungkinkan Anda untuk mengubah ukuran jendela browser ke ukuran yang berubah-ubah: Tekan F12 untuk alat pengembang, buka Alat | Ubah ukuran dan pilih ukuran yang Anda inginkan. Kemudian gunakan beberapa alat yang dapat menangkap jendela di luar layar jika jendela lebih besar dari layar Anda. Artikel ini sepertinya menunjukkan bahwa Snagit dapat melakukan ini. Kemudian lihat saja foto yang diambil.

Jaco Briers
sumber