Monitor méretek
 |
M = Asztali vagy mobileszköz monitorjának mérete. |
|
Képernyő (Monitor):
|
Ablak átméretezésekor változnak. |
Színpaletta bitmélysége: |
| availWidth = | Visszaadja a képernyő szélességét. (Kivéve a Windows tálcáját.) Az availWidth tulajdonság a felhasználó képernyőjének szélességét, pixelben, mínusz interfész funkciókkal, például a Windows tálcájával tér vissza. |
| availHeight = | Visszaadja a képernyő magasságát (Kivéve a Windows tálcáját.) A rendelkezésre álló tulajdonság a felhasználó képernyőjének magasságát pixelben, mínusz interfész funkciókkal, például a Windows tálcájával adja vissza. |
| width = | Visszaadja a képernyő teljes szélességét. (screen.width(); ) |
| height = | Visszaadja a képernyő teljes magasságát. (screen.height(); ) |
| colorDepth = bit / pixel |
Visszaadja a színpaletta bitmélységét a képek megjelenítéséhez. A colorDepth tulajdonság visszaadja a színpaletta bitmélységét a képek megjelenítéséhez (bitenként pixelenként). A Szám, amely a színpaletta bitmélységét mutatja a képek megjelenítéséhez, bitenként pixelenként. Lehetséges értékek: 1 bit pixelenként 4 bit képpontonként 8 bit / pixel 15 bit / pixel 16 bit / pixel 24 bit / pixel 32 bit képpontonként 48 bit / pixel |
| pixelDepth = | Visszaadja a képernyő színfelbontását (bitenként pixelenként) Nem támogatott IE 9 és korábbi verzióiban. Színfelbontást ábrázoló szám, képpontonként. Lehetséges értékek: 1 bit pixelenként 4 bit képpontonként 8 bit / pixel 15 bit / pixel 16 bit / pixel 24 bit / pixel 32 bit képpontonként 48 bit / pixel |
Monitor méreteinek lekérdezése.
A HTML fájl tartalma.
<head> <title>Monitor méretei.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script> <script type="text/javascript" src="monitor.js"></script> <link href="stílus.css" rel="stylesheet" type="text/css" /> </head> <body id="bodi"> <h1>Monitor méretei.</h1> <p>Képernyő (Monitor) méretei:<br> screen.width; = <span class="KvFB"></span> <br> screen.height; = <span class="KfFB"></span> </p> <p>Képernyő elérhető méretei:<br> screen.availWidth; = <span class="Mwidth"></span> <br> screen.availHeight; = <span class="Mheight"></span> </p> <p>Böngésző ablakának méretei, melyek az ablak átméretezésekor változnak:<br> $(window).width(); = <span class="WaWidth"></span> px <br> $(window).height(); = <span class="WaHeight"></span> px </p> <p>Kiválasztott objektum méretei: <br> body.offsetWidth; = <span class="Bwidth"></span> <br> body.offsetHeight; = <span class="Bheight"></span> </p> <p>Színpaletta bitmélysége: <br> screen.colorDepth = <span class="SzinM"></span> bit / pixel<br> </p> <p>Képernyő színfelbontása: <br> screen.pixelDepth = <span class="KPontok"></span> </p> </body>
A monitor.js fájl tartalma.
$(document).ready(function(){
// Eszköz méretei. -------------------------------------------------
function eszkozablak(){
var Mszelesseg= screen.availWidth; $(".Mwidth").html(Mszelesseg);
var Mmagassaga= screen.availHeight; $(".Mheight").html(Mmagassaga);
}
eszkozablak();
// Window ablak méretei. ---------------------------------------------
function windowablak(){
var WinWidth=$(window).width(); $(".WaWidth").html(WinWidth);
var WinHeight=$(window).height(); $(".WaHeight").html(WinHeight);
}
windowablak();
// A body terület méretei.---------------------------------------------
function bodyablak(){
var bodyTer = document.getElementById("bodi");
bodisz=(bodyTer.offsetWidth); $(".Bwidth").html(bodisz);
bodim=(bodyTer.offsetHeight); $(".Bheight").html(bodim);
}
bodyablak();
// Ablak átméretezése utáni méretek.-------------------------------------
$(window).resize(function(){
eszkozablak();
windowablak();
bodyablak();
});
// Képernyő screen vízszintes felbontása. -------------------------------
var KVfelbontas = screen.width; $(".KvFB").html(KVfelbontas);
// Képernyő screen függőleges felbontása. --------------------------------
var KFfelbontas = screen.height; $(".KfFB").html(KFfelbontas);
// Színmélység meghatározása. Akkor van értéke, ha a képernyő, színpalettát használ.
var colorm="Nincs érték";
var colorm=Math.pow(2,screen.colorDepth);
$(".SzinM").html(colorm);
// Képernyőn lévő pontok színfelbontása.----------------------------
var PixelDepth = screen.pixelDepth;
$(".KPontok").html(PixelDepth);
});
Kiválasztott elem, területének méretei.( magasság / szélesség.)
- height( ) -------------- Elem magassága. (Melyet a height stílusmeghatározásakor, beírtunk.)
- width( ) --------------- Elem szélessége. (Melyet a width stílusmeghatározásakor, beírtunk.)
- innerHeight( ) ------ Elem magassága. (Beleértve a paddingot, de a bordert nem.)
- innerWidth( ) ------- Elem szélessége. (Beleértve a paddingot, de a bordert nem.)
- outerHeight( ) ------ Elem magassága. (Beleértve paddingot és bordert.)
- outerWidth( ) ------- Elem szélessége. (Beleértve paddingot és bordert.)
Méret példák, elem változó tulajdonságainál.
|
Div elem, stílus meghatározása: | ||
|
height() = width( ) = |
innerHeight() = innerWidth( ) = |
outerHeight() = outerWidth( ) = |
|
Div elem, stílus meghatározása: | ||
|
height() = width( ) = |
innerHeight() = innerWidth( ) = |
outerHeight() = outerWidth( ) = |
|
Div elem, stílus meghatározása: | ||
|
height() = width( ) = |
innerHeight() = innerWidth( ) = |
outerHeight() = outerWidth( ) = |
|
Div elem, stílus meghatározása: | ||
|
height() = width( ) = |
innerHeight() = innerWidth( ) = |
outerHeight() = outerWidth( ) = |
<p>Ez a div elem, nem rendelkezik height meghatározással.<br>
A terület magasságát, azaz, height méretét,<br>
az itt elhelyezett:<br>
- Szövegsorok száma,<br>
- Elhelyezett fotók száma.<br>
- A padding top és bottom mérete.<br>
- A border top és bottom mérete.<br>
Határozza meg. </p>
Egér pozíciója a böngészőben megnyitott weblap,
látható tartalmának területén.
event.pageY = Visszaadja az egér top pozícióját, dokumentum felső szélétől.
event.pageX = Visszaadja az egér left pozícióját, dokumentum bal szélétől.
Egér pozíciója:
Top y =0
Left x =0
<head> <title>Egér pozíció.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script> <script type="text/javascript" src="eger.js"></script> <link href="stílus.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="egerpoz"> <p>Egér pozíciója:<br> Top y = <span class="egeryp">0</span> <br> Left x = <span class="egerxp">0</span> </p> </div> </body>
JavaScript "eger.js" fájl tartalma.
$(document).ready(function(){
// Egér pozíciójának meghatározása. ------------------------------------------------
$(document).mousemove(function(event){
$(".egerxp").html(event.pageX);
$(".egeryp").html(event.pageY);
});
});
Megjegyzés.
Átlagos monitoron, kerekítve kb. 30 pixel van 1 cm-ben (0,33mm pixelméretet feltételezve).
1 pixel = három kis lámpa.
Pixelsűrűség mértéke a ppi (pixel per inch - képpont / inch), ami azt mutatja meg, hogy egy négyzet inch területen, hány képpontot látunk.
1 inc(col hüvelyk) = 0,025400084347599997 m = 2.54000843476 cm = 25.400084347599996 mm
A képpontokat dotnak hívják.
A dot per inch (dpi) mértékegység fejezi ki a pontsűrűséget vagy felbontást.
A nyomtatók felbontása: 300, 600 vagy 1200 dpi-re állítható.
600 dpi felbontásnál, 1 inchre 600 dot esik, 1 inch 2,54 cm, 1 cm-re ekkor: 600/2,54=236 képpont jut.