Viewport, kullanıcıların bir web sayfasında görüntüleyebildiği alanların tamamına deniyor. Bu açıdan; görüntü alanı ya da görünür alan gibi Türkçe ifadeler ile de tanımlanabilen Viewport, kullanıcının kullandığı tarayıcıdaki görünür alanlardır. Peki Viewport ne değildir? Örneğin, ekran boyutu ile Viewport aynı şey değildir. İnternete bağlanılan bir cihazın Viewport’u değişebilir ancak ekran boyutu sabittir. Viewport’lar, kullanılan cihazlara göre de farklılık gösterir. Tahmin edebileceğiniz gibi mobil cihazlarda Viewport’ların ebatı daha küçüktür. Masaüstü ya da dizüstü bilgisayarlarda ise daha büyük ebatlara sahip Viewport’lar görebilirsiniz. Tablette ise bu ölçü mobil cihaz ile dizüstü / masaüstü bilgisayarların ortasında yer alır. Bunun yanı sıra eğer kullanıcı masaüstü / dizüstü bilgisayarında tarayıcı boyutunu daraltırsa da Viewport’un ebatı küçülebilir. Burada Viewport ile beraber iki farklı terimi de açarak muhtemel kafa karışıklıkları önlenebilir. “Device” yani kullanılan donanım, bir tarayıcıyı kullanmak için tercih ettiğiniz cihaza denir. Yani Device akıllı telefon, PC, tablet gibi örneklere sahip. Cihazların kendilerine ait ekran boyutları vardır ve bunlar Viewport değildir.
Örneğin, 5 inç ekrana sahip telefonların ekran boyutu 5 inç, yani 12,7 cm’dir. Bir diğer terim ise Browser, yani tarayıcıdır. Tarayıcı, ziyaret etmek istediğiniz web sitesini adres çubuğuna yazdığınız yazılımdır. Örneğin, bu siteye girdiğiniz Google Chrome, Safari, Firefox vs. Browser, yani tarayıcılara verilebilecek popüler örneklerden birkaçıdır. Viewport ise kullandığınız cihazda açtığınız tarayıcıdaki web sayfasını görüntüleyen bölgeye denebilir. Akıllı telefonların, tabletlerin günlük hayata bu denli girmediği yıllarda web sayfaları yalnızca PC’ler için tasarlanıyordu. Bugün ise yüksek oranda kullanılan akıllı telefonlara göre de web sayfaları tasarlanmakta. Sitenizin mobil uyumlu olması da bu açıdan önemli. Mobil uyumlu olan tüm web sitelerinde bir Viewport etiketi bulunur. Web siteniz için ideal Viewport’u oluşturmak istiyorsanız <meta name=”viewport” content=”width=device-width” /> etiketini kullanabilirsiniz. Bu kodu <head> içerisine koymak yeterli oluyor. Bu koddaki ilgili yerleri, web sitenize göre düzenleyerek Viewport’unuzu oluşturabilirsiniz.