Per bilanciare meglio una pagina su cui sto lavorando vorrei trovare un modo per aumentare il margine superiore di un DIV in base alla risoluzione dello schermo. Qual è il modo migliore per impostare queste dimensioni con jQuery o Javascript?jQuery Risoluzione schermo Risoluzione altezza
30
A
risposta
71
Per ottenere la risoluzione dello schermo in JS utilizzare screen
oggetto
screen.height;
screen.width;
Sulla base di che valori è possibile calcolare il margine a tutto ciò che più vi si addice.
4
Scopri i jQuery dimensions plugin
22
Ecco un esempio su come centrare un oggetto in verticale con jQuery:
var div= $('#div_SomeDivYouWantToAdjust');
div.css("top", ($(window).height() - div.height())/2 + 'px');
ma si potrebbe facilmente cambiare che per qualunque i vostri bisogni sono.
5
Un altro esempio per div verticale e in orizzontale centrato o qualsiasi altro oggetto (s):
var obj = $("#divID");
var halfsc = $(window).height()/2;
var halfh = $(obj).height()/2;
var halfscrn = screen.width/2;
var halfobj =$(obj).width()/2;
var goRight = halfscrn - halfobj ;
var goBottom = halfsc - halfh;
$(obj).css({marginLeft: goRight }).css({marginTop: goBottom });
2
var space = $(window).height();
var diff = space - HEIGHT;
var margin = (diff > 0) ? (space - HEIGHT)/2 : 0;
$('#container').css({'margin-top': margin});
Problemi correlati
- 1. Programmazione Android - risoluzione schermo
- 2. Risoluzione schermo dispositivo corona SDK
- 3. Java Toolkit descrepenses risoluzione schermo
- 4. Intestazione dimensione schermo (larghezza, altezza) risoluzione dispositivo mobile
- 5. Android: altezza del layout in percentuale della risoluzione dello schermo
- 6. Ottieni risoluzione nativa dello schermo
- 7. Schermo codice di risoluzione java
- 8. Risoluzione schermo iPhone e iPad
- 9. Quale risoluzione dello schermo dovrei usare?
- 10. Ridimensionamento della risoluzione dello schermo JavaFX
- 11. Qual è la risoluzione dello schermo dell'iPhone?
- 12. Risoluzione dello schermo su un'app PhoneGap
- 13. CSS: schermo assoluta problema di risoluzione
- 14. Ottenere la risoluzione dello schermo usando PHP
- 15. Risoluzione dello schermo nell'app UWP Win10
- 16. XNA - Ottieni risoluzione dello schermo corrente
- 17. Come posso ottenere la risoluzione dello schermo in R
- 18. Come posso ottenere la risoluzione dello schermo in java?
- 19. Android: Ottieni la risoluzione dello schermo/pixel come valori interi
- 20. Immagine di sfondo diversa a seconda della risoluzione dello schermo?
- 21. Sviluppo app mobile - Orientamento, risoluzione e larghezza/altezza
- 22. Informazioni sulla risoluzione dell'iPhone
- 23. Come gestire diverse dimensioni dello schermo/risoluzione dello schermo durante lo sviluppo di un sito?
- 24. Risoluzione mobile effettiva
- 25. Ottieni la risoluzione dello schermo su un sito web mobile
- 26. QT ottenere la risoluzione dello schermo senza il monitor esteso
- 27. Risoluzione dell'immagine dello schermo retina utilizzando le query multimediali
- 28. Cambiamenti nella risoluzione dello schermo dell'iPhone nell'hardware futuro
- 29. Risoluzione schermo target di Windows Phone 7 - raccomandazioni?
- 30. risoluzione dello schermo per Android e iPhone design in Photoshop
sto solo imparando Javascript; Qualche possibilità che tu mi mostri l'approccio che avresti impiegato per calcolare l'altezza e aggiungere un certo margine superiore a questo? L'ID del div che sto regolando è "port-cont". –
Benché si disponga di un'altezza dello schermo, è necessario sottrarre qualcosa per il menu del browser, la barra di stato, ecc. È difficile dire quanto sarebbe perché dipende dal browser. Quindi dovresti sperimentare dimensioni diverse per i tuoi elementi fino a quando il sito non avrà l'aspetto giusto. Se posso suggerire di non sapere se JS è quello che stai cercando. Puoi semplicemente impostare l'altezza nel foglio di stile CSS con un valore percentuale che sarà sempre impostato correttamente senza leggere la risoluzione dello schermo in JS. – RaYell
http://api.jquery.com/height/ – foxybagga