Tarayıcı 400 pikselin altında ölçeklenmiyor mu?

Sıvı bir stil sayfasını bir araya getirmeye çalışıyorum ve harika çalışıyor. Fark ettiğim bir şey, Chrome'daki tarayıcı penceremin 400 pikselin altında yeniden boyutlandırılmaması, sadece orada sıkışıyor ve ölçeklendirildikçe FF'de sadece 400 piksel civarında duruyor ve sonra yatay kaydırma çubuğu açılıyor.

Siteyi telefonumda açtığımda 320px civarında mükemmel görünüyor, bu yüzden 400px'den daha düşük bir ölçek yaptığını biliyorum.

Bunun tarayıcı / masaüstü bir şey olup olmadığını veya CSS'imden başka bir şeye bakıp bakmamam gerektiğini merak ediyordum. Herhangi bir min-genişlik bildirimleri yok, bu yüzden bu neden olabilir emin değilim.

Yine masaüstünde yaklaşık 400 piksel min genişliğe kadar ölçekleniyor ve duruyor, ancak telefonumda açtığımda kabaca 320 piksel olan telefon ekranının boyutuna ölçekleniyor ... merak ediyorum neden en azından kazandı masaüstündeki 320 piksele indirgenmez.

-edit- Ayrıca bunun önemli olup olmadığından emin değilim ama Opera hemen hemen hiçbir şeye ölçeklenmesine izin veriyor ... Bu yüzden Opera ile çalışıyor, Chrome veya FF'de değil ... herhangi bir fikir?

Chrome, 400 piksel (OS X) veya 218 piksel (Windows) altında yatay olarak yeniden boyutlandırılamaz, ancak soruna gerçekten basit bir çözümüm var:

1. Web denetçisini alta yerine sağa yerleştirin
2. Müfettiş panelini yeniden boyutlandırın - artık tarayıcı alanını gerçekten küçültebilirsiniz (0 piksele kadar)

Güncelleme: Chrome artık sağa yerleştirildiğinde denetçi pencerelerini dikey olarak düzenlemenize izin veriyor! Bu, düzeni gerçekten geliştirir.

HTML ve CSS panelleri çok iyi uyuyor ve hatta küçük bir konsol paneli de açıyorsunuz. Bu, Firefox / Firebug'dan Chrome'a ​​tamamen taşınmamı sağladı.

Bir adım daha ileri gitmek isterseniz, web denetçisi ayarlarına (dişli simgesi, sağ alt) bakın ve kullanıcı aracısı sekmesine gidin. Ekran çözünürlüğünü burada istediğiniz gibi ayarlayabilir ve hatta portre ve manzara arasında hızlı bir şekilde geçiş yapabilirsiniz.

GÜNCELLEME : İşte karşımıza çıkan gerçekten harika bir araç. http://lab.maltewassermann.com/viewport-resizer/

bunun nedeni tarayıcınıza yüklediğiniz eklentiler olabilir. araç çubuğundan tüm eklenti simgelerini kaldırın veya gizleyin ve yeniden boyutlandırmayı deneyin. eklentiler olduğunda tarayıcı yalnızca adres çubuğunu yeniden boyutlandırır ve eklentileri görünür tutar.

Güncelleme: 7/14/2013

En son krom sürümü ile artık adres çubuğunu yeniden boyutlandırabilirsiniz ve eklentileri otomatik olarak gizler.

Ben de güdük ama basit bir çözüm ile sona erdi. Yeni bir pencere açmak için bir bağlantı içeren bir HTML dosyası oluşturdum:

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

Bu yeni pencerede adres çubuğu ve Chrome'dan başka bir şey yok, bunu 111x80'e kadar özgürce yeniden boyutlandırmamı sağlıyor.

nayan9'un çözümü harika çalışıyor ve bir html dosyası oluşturmak zorunda kalmadan bir yer imine konabilir. Chrome'da, URL ile yeni bir yer işareti oluşturun:

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

Ve ona "Küçük Pencereyi Aç" veya benzeri bir ad verin. Bu, krom içinde boyut kısıtlamaları olmadan pencereleri kolayca açmanızı sağlar. Bunu adres çubuğunuza kopyalamanın işe yaramayacağını unutmayın - krom "javascript:" kodunu kaldırır.

Farklı cihazları taklit etmek için ekran genişliğinizi azaltmak istiyorsanız (ve bunu neden başka yapmak istersiniz?):

Chrome'un artık müfettişinde, üst menü çubuğundaki (büyüteç ve Öğeler arasında) küçük telefon simgesini tıklatarak etkinleştirilen bir Emülasyon bölümü var:

Emülasyon modu, dokunma, coğrafi konum belirleme ve hatta ivmeölçer girişi gibi diğer hoş özelliklerin yanı sıra görünüm boyutunu tüm yaygın mobil ekran boyutlarına ayarlamanızı sağlar:

Nayan9 ve drinkdecaf'ın söylediklerine ek olarak, window.URL'yi pencere çağrısına atabilirsiniz. 320 penceresinde görüntülemekte olduğunuz sayfayı görmek için açın. Kaydırma çubuğu bekliyorsanız, genişliğe biraz daha eklemek isteyebilirsiniz.

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

Chrome'daki DevTools, bu yanıtların çoğunun gönderildiği andan itibaren önemli ölçüde ilerlemiştir. Bu sorunu şimdi ele almanın en iyi yolu, Chrome'da yerleşik olarak bulunan emülatörleri kullanmaktır.

Emülatörleri kullanmak için DevTools'u açın (tuşuna basın F12) ve ardından aşağıdaki simgeye tıklayarak geçiş yapın Device Toolbar:

Bu, daha sonra istediğiniz mobil cihazı veya görünüm alanı boyutunu taklit etmenize olanak tanır.

chrome'da sağ üst köşedeki eklentilerinizin simgeleri soruna neden olur

-> adres çubuğunu (URL'leri yazdığınız yer) maksimum genişliğe yeniden boyutlandırın (sağ kenardaki çubuğu sağa doğru sürükleyin)

veya simgeleri devre dışı bırak

Tembelim, daha da kolaylaştırmak için, yer işaretinin kullanıcıdan boyutları sormasına izin verin:

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);})()

Bunun için hızlı bir çözüm buldum.

Chrome'a ​​Duyarlı Web Tasarım Eklentisini yüklemeniz yeterlidir; adres çubuğu ve sekmeleri olmadan 10 piksel veya daha küçük bir boyuta ölçeklenebilen ayrı bir pencere açılır.

Buraya bağlantı kurun: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

Benzer sorunlar yaşıyorum ve sadece iyi bir iş buldum. Chrome cihazlarınızı açın ve sol üstte küçük bir ekran ve ipad simgesi var. Tıklayın, sayfanızın mobil bir görünümünü açar. Önceden tanımlanmış aygıtlara veya özel bir çözünürlüğe ayarlayabilirsiniz. Aslında oldukça şık.

Başka bir kolay çözüm, Gizli Mod'a girmek için Strg + Shift + N tuşlarına tıklamaktır. Orada Tarayıcı pencerenizi istediğiniz gibi yeniden boyutlandırabilirsiniz.

Bu aracı seviyorum, çünkü hızlı bir şekilde geçiş yapmanızı sağlar ve ayrıca mobil boyutlar için portre / yatay arasında kolayca geçiş yapar. Ayrıca kişiselleştirilmiş bir yer imi yapmanıza izin verir, bu nedenle sık sık belirsiz çözünürlükler için tasarlarsanız, bunları kaydedebilir ve kullanabilirsiniz.

Bu araçlardan birini kullanmak zorunda kaldım çünkü yukarıdaki cevapla bile penceremi 320'ye doğru ölçeklendiremedim, bu araç genel olarak daha hızlı bir çözüm gibi görünüyor.

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

Sabitlenmiş sekmelerle her zaman bu sorunla karşılaşıyorum. Chrome, varsa sekiz sabitlenmiş sekmenin yatay genişliğinin altında yeniden boyutlandırılmaz! Bunu çözmek için yeniden boyutlandırmak istediğiniz sekmeyi ayırmanız yeterlidir ...

Bu, stackoverflow topluluğuna ilk katkım ve interneti bu kadar güçlü bir araç haline getiren harika insanlara geri verme çabam. Şimdi anser: Safari, bu harika özelliğe sahip. Tercihlerde safari geliştirici seçeneğini etkinleştirmeniz gerekir. Safari'de geliştirici menüsünü etkinleştirmek için tercihleri ​​ayarlama ekran görüntüsü

Etkinleştirildikten sonra çok güçlü geliştirici araçlarına erişebilirsiniz. Bu araçlardan biri, web sitenizin duyarlı düzenini test etmek için kullanılabilecek Viewport ayarlamasıdır. Duyarlı yerleşim testini etkinleştirmek için, safari görünümü bağlantı noktası ayar seçeneğini etkinleştirmek için kısayol Cmd + ctr + R'yi kullanabilirsiniz. Bu, web sitenizi çeşitli görünüm bağlantı noktası boyutlarında test etmek için yeterli kontrol sağlayacaktır.

Duyarlı düzen testi seçeneği etkinleştirildiğinde tarayıcı pencerenizin nasıl görüneceğine dair ekran görüntüsü.

1. Safari'de geliştirici menüsünün nasıl etkinleştirileceği bağlantısı: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

Birçok akıllı telefon, sayfayı yakınlaştırma kullanarak ekran boyutlarına sığacak şekilde ölçeklendirir. Minimum sayfa genişliğiniz muhtemelen 400 pikseldir. Herhangi bir örnek kod olmadan, söylenebilir her şey olduğunu düşünüyorum.