Articles
CSS'e Giriş
Görünüm Alanı ve Duyarlı Tasarım

Görünüm Alanı ve Duyarlı Tasarım

Bu makale, görünüm alanını ve duyarlı tasarımı açıklar.

<meta> etiketiyle görünüm alanının nasıl ayarlanacağını ve bunun neden önemli olduğunu öğreneceksiniz.

YouTube Video

Önizleme için HTML

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

HTML'de viewport Ayarları Hakkında

viewport ayarı, web sayfasını görüntüleyen cihazın görüntüleme alanı (viewport) hakkında bilgi kontrolü için kullanılır. Özellikle mobil cihazlarda web sayfalarının görüntülenmesini ayarlamada önemli bir rol oynar.

Viewport Nedir?

Viewport, kullanıcıların bir web sayfasını görüntülediği tarayıcı pencere ya da cihaz üzerindeki görüntüleme alanını ifade eder. Masaüstünde, tarayıcı penceresinin boyutu viewport olurken, akıllı telefonlar ve tabletler gibi mobil cihazlarda ekran boyutu viewport olur.

Viewport Belirleme

Viewport'u kontrol etmek için HTML'de <meta> etiketi kullanılarak ayarlar yapılandırılır. Bu ayar, sayfanın farklı cihazlarda nasıl görüntüleneceğini belirlemenize olanak tanır.

Temel Sözdizimi 

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bu kod, viewport genişliğini cihazın genişliğiyle eşleştirir ve sayfanın başlangıç görüntüleme ölçeğini (zoom seviyesi) 1.0 (%%100 görüntüleme) olarak ayarlar.

viewportun Temel Özellikleri

viewportun content özelliğiyle esas olarak belirtilebilecek özellikler şunlardır:.

  1. width

    • width için viewport genişliğini belirtin. device-width olarak ayarlandığında, viewport cihazın fiziksel genişliğine piksel olarak ayarlanır.
    • Örnek: width=device-width

  2. height

    • height için viewport yüksekliğini belirtin, ancak genellikle yalnızca genişlik ayarlanır ve yükseklik sık sık belirtilmez. device-height olarak ayarlandığında, viewport cihazın fiziksel yüksekliğiyle piksel olarak eşleşir.
    • Örnek: height=device-height

  3. initial-scale

    • initial-scale için sayfanın başlangıç yakınlaştırma seviyesini belirtin. 1.0, cihazın %100 yakınlaştırma düzeyini ifade eder.
    • Örnek: initial-scale=1.0

  4. minimum-scale

    • minimum-scale için uzaklaştırma sırasında minimum ölçeği belirtin. 0.5 olarak ayarlayarak, %50'ye kadar uzaklaştırma yapabilirsiniz.
    • Örnek: minimum-scale=0.5

  5. maximum-scale

    • maximum-scale için yakınlaştırma sırasında maksimum ölçeği belirtin. 2.0 olarak ayarlayarak, %200'e kadar yakınlaştırma yapabilirsiniz.
    • Örnek: maximum-scale=2.0

  6. user-scalable

    • user-scalable için kullanıcının sayfayı yakınlaştırıp yakınlaştıramayacağını belirtin. yes veya no ile belirtin.
    • Örnek: user-scalable=no ayarlandığında kullanıcı yakınlaştırması devre dışı bırakılır.

Sık Kullanılan Örnekler

  1. Standart Duyarlı Ayarlar
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bu ayar, sayfanın otomatik olarak mobil cihazların ekran genişliğine uyarlanmasını sağlar ve sayfanın %100 yakınlaştırma düzeyiyle görüntülendiğinden emin olur. Duyarlı tasarım için temel bir ayardır.

  1. Yakınlaştırmayı Devre Dışı Bırak
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Bu ayar, kullanıcının yakınlaştırma yapmasını devre dışı bırakır. Yakınlaştırmanın belirli bir tasarım için gerekli olmadığı durumlarda veya yakınlaştırma işlemlerinin tasarımda bozulmaya neden olabileceği durumlarda kullanılır.

  1. Sabit Yakınlaştırma Seviyeleri ve Görünüm Alanı Genişliği
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Bu ayar, görünüm alanı genişliğini 1024 piksel olarak sabitler ve ilk görüntülemede yakınlaştırma seviyesini %100 olarak ayarlar. Sayfa genişliğini cihaz genişliğine bakılmaksızın sabit tutmak istediğiniz durumlarda kullanılır.

viewport'un Rolü

viewport ayarı, özellikle mobil cihazlarda görüntülemeyi optimize etmek için gereklidir. Viewport'u doğru yapılandırarak, aşağıdaki gibi sorunları önleyebilirsiniz:.

  • Sayfanın cihaz genişliğini aşmasını önler, bu da kaydırma gereksinimini azaltır.
  • Metin ve görüntülerin çok küçük hale gelmesini ve kolayca okunamamasını engeller.
  • Tüm sayfanın uzaklaştırılmasını ve etkileşimin zorlaşmasını engeller.

Özet

  • Viewport, web sayfasını görüntüleyen cihazın görüntüleme alanını kontrol etmek için kullanılır.
  • Genellikle mobil cihazlarda görüntüleme için kullanılır ve duyarlı tasarımda önemli bir rol oynar.
  • width=device-width ve initial-scale=1.0 gibi ayarlar genellikle standart duyarlı web tasarımında kullanılır.

Viewportun doğru ayarlanması, mobil kullanıcılar için rahat bir görüntüleme deneyimi sağlayabilir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

CSS'de Duyarlı Tasarıma Genel Bakış