Il browser non si ridimensiona al di sotto di 400 px?


151

Sto lavorando per mettere insieme un foglio di stile liquido e funziona benissimo. Una cosa che ho notato è che la finestra del mio browser in Chrome non si ridimensionerà al di sotto di 400 px, si blocca solo lì e in FF mentre la ridimensiono si ferma a circa 400 px e quindi apre una barra di scorrimento orizzontale.

Quando apro il sito sul mio telefono, sembra perfetto a circa 320 px, quindi so che scala meno di 400 px.

Ero curioso di sapere se qualcuno sapeva se si trattava di un browser / desktop o se avrei dovuto guardare qualcosa di diverso dal mio CSS. Non ho dichiarazioni sulla larghezza minima, quindi non sono sicuro di cosa potrebbe causare questo.

Di nuovo sul desktop si riduce a una larghezza minima di circa 400 px e si interrompe, ma quando lo apro sul mio telefono si ridimensiona alla dimensione dello schermo del telefono che è di circa 320 px ... curioso perché almeno ha vinto ridimensiona fino a 320 px sul desktop.

-edit- Inoltre non sono sicuro che questo abbia importanza, ma Opera gli permette di ridimensionarsi praticamente a nulla ... Quindi funziona con Opera e non con Chrome o FF ... qualche idea?


1
Ricordo che Chrome era pieghevole fino a un minuscolo mattone. Quindi questo è stato introdotto intenzionalmente. Sull'attuale Chrome vedo che la finestra diventerà piccola solo come la riga superiore delle icone. Nascondere il pulsante Home o le icone delle estensioni mi consente di renderlo un po 'più piccolo.
Mrtsherman,

7
Questo sarà qualcosa di specifico per il tuo CSS e markup. Senza nulla da rivedere, non c'è dubbio. Scattare ipotesi al buio non è davvero un approccio utile. In tal caso, dovrai eseguire il debug da solo.
Jared Farrish,

3
Sì, sono abbastanza sicuro che sia solo la larghezza minima letterale della finestra del browser, proprio come la maggior parte dei programmi ha una larghezza minima a cui può essere ridimensionato. Il mio Chrome sembra non essere in grado di ridimensionare più piccolo di un viewport 250px.
justisb

1
Chrome 33 lo ha riportato a 400px
Sparkup il

4
"Questo sarà qualcosa di specifico per il tuo CSS e markup" ... Ehm no, in realtà non lo era.
Stijn de Witt,

Risposte:


253

Chrome non può ridimensionare in orizzontale sotto 400px (OS X) o 218px (Windows) ma ho una soluzione davvero semplice al problema:

  1. Aggancia l'ispettore web a destra anziché in basso
  2. Ridimensiona il pannello di ispezione : ora puoi rendere l'area del browser davvero piccola (fino a 0px)

Aggiornamento: Chrome ora ti consente di disporre le finestre dell'ispettore in verticale quando ancorato a destra! Questo migliora davvero il layout.

impostazione del layout del pannello verticale

I pannelli HTML e CSS si adattano molto bene e si apre anche un piccolo pannello console. Questo mi ha permesso di passare completamente da Firefox / Firebug a Chrome.

Ispettore ancorato a destra con layout del pannello verticale

Se vuoi fare un passo ulteriore, guarda le impostazioni della finestra di ispezione web (icona a cremagliera, in basso a destra) e vai alla scheda dell'agente utente . Puoi impostare la risoluzione dello schermo su quello che ti piace qui e anche alternare rapidamente tra ritratto e paesaggio.

Impostazioni di risoluzione del dispositivo

AGGIORNAMENTO : Ecco un altro strumento davvero interessante che ho incontrato. http://lab.maltewassermann.com/viewport-resizer/


1
+1 L'ispettore è l'ideale per questo, consente anche di impostare user-agent ecc.
GDmac

2
Tu sei l'uomo. Ed è ancora più semplice eseguire il debug del piccolo schermo, quando c'è una finestra di ispezione grande appropriata.
aebersold

1
Grazie @aebersold Sì, è un bel bonus ottenere una bella finestra di ispezione quando si lavora su layout mobili.
Oisin Lavery,

3
IMO questa dovrebbe essere la risposta accettata. L'idea è semplice e geniale e il tuo suggerimento sopra l'override delle metriche è fantastico. E così è il bookmarklet a cui sei collegato!
marzo

5
Qualcun altro non è riuscito a capire come agganciare gli strumenti di sviluppo a destra? stackoverflow.com/questions/10023640/…
Erti-Chris Eelmaa,

36

ciò potrebbe essere dovuto ai componenti aggiuntivi installati nel browser. rimuovere o nascondere tutte le icone dei componenti aggiuntivi dalla barra degli strumenti e provare a ridimensionare. quando sono presenti componenti aggiuntivi, il browser ridimensiona solo la barra degli indirizzi e mantiene visibili i componenti aggiuntivi.

Aggiornamento: 14/07/2013


Con l'ultima versione di Chrome, ora puoi ridimensionare la barra degli indirizzi e nasconderà automaticamente i componenti aggiuntivi.


4
quando sono presenti componenti aggiuntivi, il browser viene ridimensionato solo alla dimensione della barra degli indirizzi e mantiene visibili i componenti aggiuntivi. spero che tu capisca questo questo non è un effetto collaterale degli addon. ma quando ci sono componenti aggiuntivi installati il ​​browser non può ridimensionare al valore minimo. a causa delle icone del componente aggiuntivo accanto alla barra degli indirizzi.
Chamika Sandamal,

2
La rimozione di tutte le icone dei componenti aggiuntivi in ​​Chrome non mi ha risolto questo problema. La soluzione di nayan9 ha fatto.
Andrew Shooner,

31
Questa non è la risposta . Anche con tutti i componenti aggiuntivi / estensioni disabilitati, la larghezza minima di Chrome è comunque di 400 px.
Oisin Lavery,

4
@ChamikaSandamal non è corretto. L'OP sta cercando di ridimensionare la sua finestra al di sotto di 400px. Questo è impossibile in Chrome perché il browser ha una larghezza minima di 400 px. L'unico modo per ottenere l'effetto che l'OP sta cercando è la risposta di Sherpanaut. La tua risposta non fa assolutamente nulla oltre ad aiutare l'utente ad avvicinarsi alla dura larghezza minima di 400 px, che non è ciò che l'OP stava cercando.
Fred Stevens-Smith,

2
@ChamikaSandamal mentre può funzionare per te, non funziona per il resto di noi. Non è niente contro di te. È semplicemente che questa risposta non risolve il problema per molti di noi.
DA.

19

Anch'io ero sconcertato ma ho finito con una soluzione semplice. Ho appena creato un file HTML con un collegamento per aprire una nuova finestra:

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

Questa nuova finestra non ha altro che la barra degli indirizzi e Chrome mi consente di ridimensionare liberamente fino a 111x80.


1
LOL, parla di un hack per fare una cosa semplice
Otto

17

La soluzione di nayan9 funziona benissimo e può essere inserita in un segnalibro senza dover creare un file html. In Chrome, crea un nuovo segnalibro con URL:

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

E dagli un nome di "Apri piccola finestra" o qualcosa di simile. Ciò ti consentirà di aprire facilmente le finestre senza limiti di dimensioni all'interno di Chrome. Nota che semplicemente copiarlo nella barra degli indirizzi non funzionerà: Chrome elimina "javascript:".


Questa è la risposta che ha funzionato per me. Utile per avere Tweetdeck dimensionato il più piccolo possibile.
Krug,

10

Nel caso in cui desideri ridurre la larghezza dello schermo per emulare diversi dispositivi (e perché altrimenti vorresti farlo?):

Chrome ora ha una sezione Emulazione nella sua finestra di ispezione, attivata facendo clic sulla piccola icona del telefono nella barra dei menu in alto (tra la lente di ingrandimento e Elements):

Icona di emulazione di Chrome

La modalità di emulazione consente di impostare le dimensioni del riquadro di visualizzazione su tutte le dimensioni dello schermo mobile comuni, tra le altre funzioni utili, come l'emulazione del tocco, la geolocalizzazione e persino l'input dell'accelerometro:

inserisci qui la descrizione dell'immagine


Più impressionante, non sapevo di quella funzione ... finalmente posso liberarmi del commutatore agente utente ed emulare correttamente i dispositivi mobili, grazie !! +10 a questo
andreszs

Questa funzione è stata sostituita da "Attiva / disattiva barra degli strumenti del dispositivo" stackoverflow.com/a/44194243/1175496
The Red Pea,

6

Aggiungendo ciò che hanno detto nayan9 e drinkdecaf, puoi semplicemente lanciare document.URL nella chiamata a window.open per vedere la pagina che stai attualmente visualizzando nella finestra 320. Potresti voler aggiungere un po 'di più alla larghezza se ti aspetti una barra di scorrimento.

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

3

I DevTools in Chrome sono passati sostanzialmente da quando sono state pubblicate la maggior parte di queste risposte. Il modo migliore per affrontare questo problema ora è utilizzare gli emulatori integrati in Chrome.

Per utilizzare gli emulatori aprire DevTools (premere F12) e quindi fare clic sulla seguente icona per attivare Device Toolbar:

Il pulsante devtools

Ciò ti consentirà quindi di emulare qualsiasi dispositivo mobile o dimensione della finestra che desideri.


2

in chrome le icone dei tuoi componenti aggiuntivi nell'angolo in alto a destra causano il problema

-> ridimensiona la barra degli indirizzi (dove digiti gli URL) alla massima larghezza (trascina la barra sul bordo destro a destra)

o disabilitare le icone


2

Sono pigro, per renderlo ancora più semplice, lascia che il bookmarklet chieda all'utente le dimensioni MrGreen

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


1

Ho riscontrato problemi simili e ho appena trovato una buona soluzione. Apri i tuoi devtools di Chrome e in alto a sinistra, c'è una piccola schermata e un'icona ipad. Fare clic su questo e si apre una vista mobile della tua pagina. Puoi impostarlo su dispositivi predefiniti o una risoluzione personalizzata. Abbastanza elegante in realtà.


0

Un'altra soluzione semplice è fare clic su Strg + Maiusc + N per accedere alla modalità di navigazione in incognito. Lì puoi ridimensionare la finestra del tuo browser come preferisci.


2
Su Mac 10.9 Chrome 38.0.2125.104 non è così
geotheory,

1
Anche su Linux Chromium 44.0.2403.89 non è così
Ikar Pohorský,

Su Windows 8 Chrome versione 74.0.3729.131 (build ufficiale) (64 bit), non è così
The Red Pea,

0

Mi piace questo strumento perché ti consente di passare rapidamente e passa facilmente da verticale a orizzontale per le dimensioni mobili. Ti consente anche di creare un segnalibro personalizzato, quindi se progetti frequentemente risoluzioni oscure, puoi salvarle e usarle.

Ho dovuto usare uno di questi strumenti perché anche con la risposta sopra non sono riuscito a ridimensionare correttamente la mia finestra a 320, questo strumento sembra essere una soluzione più veloce nel complesso.

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


0

Mi imbatto sempre in questo problema con le schede appuntate. Chrome non ridimensionerà al di sotto di una larghezza orizzontale di otto schede appuntate visibili se ce ne sono! Basta staccare la scheda che si desidera ridimensionare per risolvere questo ...


0

Questo è il mio primo contributo alla comunità di StackOverflow e il mio impegno per restituire a tutte le persone meravigliose che hanno reso Internet uno strumento così potente. Ora per rispondere: Safari, ha questa fantastica funzionalità. È necessario attivare l'opzione sviluppatore safari nelle preferenze. Schermata di impostazione delle preferenze in Safari per attivare il menu degli sviluppatori

Una volta attivato, puoi accedere a molti strumenti di sviluppo molto potenti. Uno di questi strumenti è la regolazione Viewport che può essere utilizzata per testare il layout reattivo del tuo sito web. Per attivare il test di lay-out reattivo, è possibile utilizzare la scorciatoia Cmd + ctr + R per attivare l'opzione di regolazione della porta di visualizzazione Safari. Questo ti darà abbastanza controllo per testare il tuo sito Web su varie dimensioni di porte di visualizzazione.

Schermata dell'aspetto della finestra del browser dopo l'attivazione dell'opzione di test del layout reattivo.

  1. Link a come attivare il menu sviluppatore in safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

-4

Molti smartphone ridimensionano la pagina per adattarla alle dimensioni dello schermo usando lo zoom. La larghezza minima della tua pagina è probabilmente di 400 px. Senza alcun codice di esempio, penso che sia tutto ciò che si può dire.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.