Ik wil mijn bezoekers de mogelijkheid bieden om afbeeldingen in hoge kwaliteit te zien, is er op elke manier die ik de raamgrootte kan detecteren?
of beter nog, de Viewport Maat van de browser met JavaScript? Zie groene omgeving hier:
Antwoord 1, Autoriteit 100%
Cross-Browser @media (width)en @media (height)waarden en nbsp;
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
window.innerWidthen window.innerHeight
- krijgt CSS viewport
@media (width)en@media (height)inclusief scrollbars initial-scaleen zoom Variaties kan mobiel veroorzaken Waarden naar Schaal Schaal naar beneden naar wat PPK de Visual Viewport noemt en wees kleiner dan de@mediawaarden- ZOOM kan ertoe leiden dat waarden 1px uit zijn vanwege native rounding
undefinedin IE8 –
document.documentElement.clientWidthen .clientHeight
- is gelijk aan CSS Viewport Width minus Scrollbar breed
- komt overeen met
@media (width)en@media (height)wanneer er nee schuifbalk - hetzelfde als
jQuery(window).width()welke jQuery roept >De browser viewport - Beschikbare kruisbrowser
- onnauwkeurig als DOCTYPE
is
ontbreekt
Bronnen
- Live-uitgangen voor verschillende dimensies
- berust gebruikt cross-browser viewport technieken
- Werkelijke gebruikt
matchMediaom precieze te verkrijgen Afmetingen in een eenheid
Antwoord 2, Autoriteit 8%
$(window).width()en $(window).height()
Antwoord 3, Autoriteit 5%
U kunt de window.innerWidthen window.innerHeighteigenschappen.
Antwoord 4, autoriteit 2%
Als je jQuery niet gebruikt, wordt het lelijk. Hier is een fragment dat in alle nieuwe browsers zou moeten werken. Het gedrag is anders in de Quirks-modus en de standaardmodus in IE. Dit regelt het.
var elem = (document.compatMode === "CSS1Compat") ?
document.documentElement :
document.body;
var height = elem.clientHeight;
var width = elem.clientWidth;
Antwoord 5
Ik heb een cross-browser manier gezocht en gevonden:
function myFunction(){
if(window.innerWidth !== undefined && window.innerHeight !== undefined) {
var w = window.innerWidth;
var h = window.innerHeight;
} else {
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
}
var txt = "Page size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}<!DOCTYPE html>
<html>
<body onresize="myFunction()" onload="myFunction()">
<p>
Try to resize the page.
</p>
<p id="demo">
</p>
</body>
</html>Antwoord 6
Ik weet dat dit een acceptabel antwoord heeft, maar ik kwam een situatie tegen waarin clientWidthniet werkte, omdat iPhone (althans de mijne) 980 retourneerde, niet 320, dus gebruikte ik window.screen.width. Ik werkte aan een bestaande site, werd “responsief” gemaakt en moest grotere browsers dwingen een andere meta-viewport te gebruiken.
Ik hoop dat dit iemand helpt, het is misschien niet perfect, maar het werkt in mijn tests op iOS en Android.
//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width
//first see if they have window.screen.width avail
(function() {
if (window.screen.width)
{
var setViewport = {
//smaller devices
phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
//bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints
other: 'width=1045,user-scalable=yes',
//current browser width
widthDevice: window.screen.width,
//your css breakpoint for mobile, etc. non-mobile first
widthMin: 560,
//add the tag based on above vars and environment
setMeta: function () {
var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other;
var head = document.getElementsByTagName("head")[0];
var viewport = document.createElement('meta');
viewport.setAttribute('name','viewport');
viewport.setAttribute('content',params);
head.appendChild(viewport);
}
}
//call it
setViewport.setMeta();
}
}).call(this);
Antwoord 7
Ik was in staat om een definitief antwoord in JavaScript te vinden: de definitieve gids, 6e editie door O’Reilly, p. 391:
Deze oplossing werkt zelfs in de eigenschappen van de Quirks, terwijl de huidige oplossing van Ryanve en ScottTvernden niet.
function getViewportSize(w) {
// Use the specified window or the current window if no argument
w = w || window;
// This works for all browsers except IE8 and before
if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };
// For IE (or any browser) in Standards mode
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { w: d.documentElement.clientWidth,
h: d.documentElement.clientHeight };
// For browsers in Quirks mode
return { w: d.body.clientWidth, h: d.body.clientHeight };
}
behalve het feit dat ik me afvraag waarom de lijn if (document.compatMode == "CSS1Compat")niet if (d.compatMode == "CSS1Compat"), alles ziet er goed uit.
Antwoord 8
Als u op zoek bent naar niet-jQuery-oplossing die de juiste waarden in virtuele pixels op Mobile geeft, en u denkt dat gewoon window.innerHeightof document.documentElement.clientHeightKan uw probleem oplossen, bestudeer deze link eerst: https: //tripleodeon.com/assets/2011/12/tabel.html
De ontwikkelaar heeft goed getest gedaan die het probleem onthult: u kunt onverwachte waarden krijgen voor Android / iOS, landschap / portret, normale / hoge dichtheid-displays.
Mijn huidige antwoord is nog geen zilveren kogel (// TODO), maar eerder een waarschuwing voor degenen die snel worden gekopieerd – plakken elke oplossing van deze draad in productiecode.
Ik was op zoek naar pagina breedte in virtuele pixels op mobiel en ik heb de enige werkcode gevonden (onverwacht!) window.outerWidth. Ik zal deze tabel later onderzoeken voor de juiste oplossing die hoogte van de navigatiebalk, wanneer ik tijd heb.
Antwoord 9
Deze code is van http://andylangton.co.uk / Artikelen / JavaScript / Get-Viewport-Size-Javascript /
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
NB: Gebruik console.log('viewport width'+viewport().width);
Antwoord 10
Er is een verschil tussen window.innerHeighten document.documentElement.clientHeight. De eerste omvat de hoogte van de horizontale schuifbalk.
Antwoord 11
Een oplossing die zou voldoen aan W3C-normen zou zijn om een transparante div te maken (bijvoorbeeld dynamisch met Javascript), de breedte en hoogte instellen op 100VW / 100VH (viewport-eenheden) en vervolgens zijn offsetbreedte en offsethooglicht. Daarna kan het element opnieuw worden verwijderd. Dit zal niet werken in oudere browsers omdat de viewport-eenheden relatief nieuw zijn, maar als je niet om hen geeft, maar over (binnenkort) normen in plaats daarvan, zou je zeker op deze manier kunnen gaan:
var objNode = document.createElement("div");
objNode.style.width = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);
Je kunt natuurlijk ook objNode.style.position = “fixed” instellen en dan 100% gebruiken als breedte/hoogte – dit zou hetzelfde effect moeten hebben en de compatibiliteit tot op zekere hoogte verbeteren. Ook kan het in het algemeen een goed idee zijn om de positie op vast te zetten, omdat de div anders onzichtbaar zal zijn maar wat ruimte in beslag neemt, wat ertoe zal leiden dat er schuifbalken verschijnen enz.
Antwoord 12
Dit is de manier waarop ik het doe, ik heb het geprobeerd in IE 8 -> 10, FF 35, Chrome 40, het werkt heel soepel in alle moderne browsers (zoals window.innerWidth is gedefinieerd) en in IE 8 (zonder window.innerWidth) werkt het ook soepel, elk probleem (zoals knipperen vanwege overloop : “verborgen”), meld dit dan alstublieft. Ik ben niet echt geïnteresseerd in de hoogte van het kijkvenster, omdat ik deze functie heb gemaakt om een aantal responsieve tools te omzeilen, maar het kan worden geïmplementeerd. Ik hoop dat het helpt, ik waardeer opmerkingen en suggesties.
function viewportWidth () {
if (window.innerWidth) return window.innerWidth;
var
doc = document,
html = doc && doc.documentElement,
body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
getWidth = function (elm) {
if (!elm) return 0;
var setOverflow = function (style, value) {
var oldValue = style.overflow;
style.overflow = value;
return oldValue || "";
}, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
setOverflow(style, oldValue);
return width;
};
return Math.max(
getWidth(html),
getWidth(body)
);
}
Antwoord 13
Als je React gebruikt, dan zou je met de nieuwste versie van react hooks dit kunnen gebruiken.
// Usage
function App() {
const size = useWindowSize();
return (
<div>
{size.width}px / {size.height}px
</div>
);
}
https://usehooks.com/useWindowSize/
Antwoord 14
u kunt gebruiken
window.addEventListener('resize' , yourfunction);
het zal uw functie uitvoeren wanneer het venster van grootte verandert.
wanneer u window.innerWidthof document.documentElement.clientWidthgebruikt, is het alleen-lezen.
je kunt het if-statement in je functie gebruiken en het beter maken.
Antwoord 15
U kunt eenvoudig de JavaScript-methode window.matchMedia()gebruiken om een mobiel apparaat te detecteren op basis van de CSS-mediaquery. Dit is de beste en meest betrouwbare manier om mobiele apparaten te detecteren.
Het volgende voorbeeld laat zien hoe deze methode daadwerkelijk werkt:
<script>
$(document).ready(function(){
if(window.matchMedia("(max-width: 767px)").matches){
// The viewport is less than 768 pixels wide
alert("This is a mobile device.");
} else{
// The viewport is at least 768 pixels wide
alert("This is a tablet or desktop.");
}
});
</script>