Browser tidak berskala di bawah 400px?

Saya sedang bekerja menyusun lembar gaya cair dan itu bekerja dengan baik. Satu hal yang saya perhatikan adalah bahwa jendela browser saya di Chrome tidak akan mengubah ukuran di bawah 400px itu hanya macet di sana dan di FF saat saya turunkan itu hanya berhenti di sekitar 400px dan kemudian muncul bilah gulir horizontal.

Ketika saya membuka situs di ponsel saya, itu terlihat sempurna di sekitar 320px, jadi saya tahu itu skala lebih rendah dari 400px.

Saya ingin tahu apakah ada yang tahu apakah ini browser / desktop atau apakah saya harus melihat sesuatu selain CSS saya. Saya tidak memiliki deklarasi lebar minimum, jadi saya tidak yakin apa yang menyebabkannya.

Sekali lagi pada desktop itu turun ke lebar minimal sekitar 400px dan berhenti, tetapi ketika saya membukanya di ponsel saya itu skala ke ukuran layar ponsel yang kira-kira 320px ... penasaran mengapa setidaknya menang turunkan ke 320px di desktop.

-edit- Juga saya tidak yakin apakah ini penting tapi Opera memungkinkannya untuk mengurangi apa-apa ... Jadi berfungsi dengan Opera dan bukan di Chrome atau FF ... ada ide?

Chrome tidak dapat mengubah ukuran secara horizontal di bawah 400px (OS X) atau 218px (Windows) tapi saya punya solusi yang sangat sederhana untuk masalah ini:

1. Dok inspektur web ke kanan, bukan ke bawah
2. Ubah ukuran panel inspektur - Anda sekarang dapat membuat area browser menjadi sangat kecil (hingga 0px)

Pembaruan: Chrome sekarang memungkinkan Anda untuk mengatur jendela inspektur secara vertikal saat merapat ke kanan! Ini benar-benar meningkatkan tata letak.

Panel HTML dan CSS sangat cocok dan Anda bahkan membuka panel konsol kecil juga. Ini memungkinkan saya untuk sepenuhnya beralih dari Firefox / Firebug ke Chrome.

Jika Anda ingin melangkah lebih jauh melihat pengaturan inspektur web (ikon roda gigi, kanan bawah), dan pergi ke tab agen pengguna . Anda dapat mengatur resolusi layar ke apa pun yang Anda suka di sini dan bahkan dengan cepat beralih antara potret dan lanskap.

UPDATE : Ini adalah alat keren lainnya yang pernah saya jumpai. http://lab.maltewassermann.com/viewport-resizer/

ini mungkin karena addons yang Anda instal di browser Anda. hapus atau sembunyikan semua ikon addon dari bilah alat dan coba ukur kembali. ketika ada add-on browser hanya mengubah ukuran bilah alamat dan membuat add-on tetap terlihat.

Pembaruan: 7/14/2013

Dengan versi chrome terbaru, sekarang Anda dapat mengubah ukuran bilah alamat dan itu akan menyembunyikan add-on secara otomatis.

Saya bingung juga tetapi berakhir dengan solusi sederhana. Saya baru saja membuat file HTML dengan tautan untuk membuka jendela baru:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

Jendela baru ini tidak memiliki apa-apa selain bilah alamat dan Chrome memungkinkan saya untuk dengan bebas mengubah ukuran ini hingga 111x80.

Solusi nayan9 bekerja sangat baik, dan dapat dimasukkan ke dalam bookmark tanpa harus membuat file html. Di Chrome, buat bookmark baru dengan URL:

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

Dan berikan nama "Open Small Window" atau yang serupa. Ini akan memungkinkan Anda untuk dengan mudah membuka windows tanpa batasan ukuran di dalam chrome. Perhatikan bahwa hanya menyalin ini ke bilah alamat Anda tidak akan berfungsi - chrome strip the "javascript:" out.

Jika Anda ingin mengurangi lebar layar untuk meniru perangkat yang berbeda (dan mengapa Anda ingin melakukan ini?):

Chrome sekarang memiliki bagian Emulasi di inspekturnya, diaktifkan dengan mengklik ikon ponsel kecil di menubar atas (antara kaca pembesar dan Elemen):

Mode emulasi memungkinkan Anda untuk mengatur ukuran viewport ke semua ukuran layar ponsel yang umum, di antara fitur-fitur bagus lainnya, seperti meniru sentuhan, geolokasi, dan bahkan input accelerometer:

Menambah apa yang dikatakan nayan9 dan drinkdecaf, Anda bisa melempar dokumen.URL ke dalam panggilan ke jendela. Buka untuk melihat halaman yang sedang Anda lihat di jendela 320. Anda mungkin ingin menambahkan lebih banyak lagi ke lebar jika Anda mengharapkan scrollbar.

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

DevTools di Chrome telah berubah secara substansial sejak sebagian besar jawaban ini diposkan. Cara terbaik untuk mengatasi masalah ini sekarang adalah dengan menggunakan emulator yang ada di dalam Chrome.

Untuk menggunakan emulator, buka DevTools (tekan F12) dan kemudian klik ikon berikut untuk beralih Device Toolbar:

Ini kemudian akan memungkinkan Anda untuk meniru mana perangkat seluler atau ukuran viewport yang Anda inginkan.

di chrome ikon addons Anda di sudut kanan atas menyebabkan masalah

-> mengubah ukuran bilah alamat (tempat Anda mengetik URL) ke lebar maksimum (seret bilah di tepi kanan ke kanan)

atau nonaktifkan ikon

Saya malas, untuk membuatnya lebih mudah, biarkan bookmarklet bertanya kepada pengguna untuk ukuran :-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()

Saya menemukan solusi cepat untuk ini.

Cukup pasang Add-on Desain Web Responsif ke Chrome, dan itu akan membuka jendela terpisah tanpa bilah alamat dan tab, yang dapat diperkecil hingga 10 px atau kurang.

Tautan di sini: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

Saya telah mengalami masalah yang sama dan baru saja menemukan pekerjaan yang bagus. Buka devtools chrome Anda dan di kiri atas, ada layar kecil dan ikon ipad. Klik itu dan itu membuka tampilan seluler halaman Anda. Anda dapat mengaturnya ke perangkat yang telah ditentukan atau resolusi khusus. Cukup bagus sebenarnya.

Solusi mudah lainnya adalah dengan mengklik Strg + Shift + N untuk masuk ke Mode Penyamaran. Di sana Anda dapat mengubah ukuran jendela Browser sesuka Anda.

Saya suka alat ini karena memungkinkan Anda beralih dengan cepat dan juga beralih antara potret / horizontal dengan mudah untuk ukuran ponsel. Hal ini juga memungkinkan Anda untuk membuat bookmark yang dipersonalisasi, jadi jika Anda sering merancang untuk resolusi yang tidak jelas, Anda dapat menyimpannya dan menggunakannya.

Saya harus menggunakan salah satu alat ini karena bahkan dengan jawaban di atas saya tidak bisa membuat jendela saya untuk skala ke 320 dengan benar, alat ini tampaknya menjadi solusi yang lebih cepat secara keseluruhan.

http://lab.maltewassermann.com/viewport-resizer/

Saya selalu mengalami masalah ini dengan tab yang disematkan. Chrome tidak akan mengubah ukuran di bawah lebar horizontal delapan tab yang disematkan jika ada! Lepaskan saja tab yang ingin Anda ubah ukurannya untuk menyelesaikan ini ...

Ini adalah kontribusi pertama saya kepada komunitas stackoverflow dan upaya saya untuk memberikan kembali kepada Anda semua orang-orang hebat yang telah menjadikan internet sebagai alat yang ampuh. Sekarang ke anser: Safari, memiliki fitur keren ini. Anda perlu mengaktifkan opsi pengembang safari dalam preferensi. Cuplikan layar pengaturan preferensi di Safari untuk menjalankan menu pengembang

Setelah diaktifkan Anda dapat mengakses banyak alat pengembang yang sangat kuat. Salah satu alat ini adalah penyesuaian Viewport yang dapat digunakan untuk menguji tata letak responsif situs web Anda. Untuk mengaktifkan pengujian tata letak responsif, seseorang dapat menggunakan pintasan Cmd + ctr + R untuk mengaktifkan opsi penyesuaian port tampilan safari. Ini akan memberi Anda kontrol yang cukup untuk menguji situs web Anda pada berbagai ukuran port tampilan.

Cuplikan layar tentang bagaimana jendela browser Anda akan terlihat setelah opsi tes tata letak responsif diaktifkan.

1. Tautan ke cara mengaktifkan menu pengembang di safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

Banyak ponsel pintar yang mengukur halaman agar sesuai dengan ukuran layarnya menggunakan zooming. Lebar halaman minimum Anda mungkin 400px. Tanpa kode contoh, saya pikir hanya itu yang bisa dikatakan.