iPhone Dev: Mobil Websiteleri için CSS bilgisi

24 Aralık 2014 - 236 Okunma
iPhone Dev: Mobil Websiteleri için CSS bilgisi
iPhone vb. Akıllı telefonlarla birlikte Websitelerinin bu yükselen güce ayak uydurması gerekti. Bunun için Mobil cihazlar için varolan sitenin daha kompakt halleri oluşturuldu. Bu şekilde websitelerinin Mobil Cihazlarla kullanımı daha kolay ve daha okunabilir hale geldi. Bu yazımda websitemizin iPhone ile girildiğinde nasıl görünmesini ve davranması gerektiğini küçük bilgiler aracılığıyla göreceğiz. Başlangıç iPhone için tasarım […]

iPhone vb. Akıllı telefonlarla birlikte Websitelerinin bu yükselen güce ayak uydurması gerekti. Bunun için Mobil cihazlar için varolan sitenin daha kompakt halleri oluşturuldu.

Bu şekilde websitelerinin Mobil Cihazlarla kullanımı daha kolay ve daha okunabilir hale geldi.

Bu yazımda websitemizin iPhone ile girildiğinde nasıl görünmesini ve davranması gerektiğini küçük bilgiler aracılığıyla göreceğiz.

Başlangıç

iPhone için tasarım planlarken en önemli şey, websitenizin bir sütundan oluşmasına önem vermenizdir. Bu ayrıca sizin web tasarım bilginizi de test etmek için güzel bir yol olacaktır.

Şimdi websitemizin Browser’ı ve girilen cihazı denetlemesinin nasıl olacağından bahsedeceğiz. Bu kodu PHP yardımıyla yazacağız ve cihazımızın iPhone olup, olmadığını öğreneceğiz.

<?php
  $tarayici = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($tarayici == true){
    $tarayici = 'iphone';
echo $tarayici;
  }
?>

Yukarıdaki kod cihazımızın iPhone olup olmadığını denetliyor ve bize bilgi veriyor. Bu kodun nasıl kullanıldığını az çok anlamışsınızdır. Bu kodu websitenizin en üstüne koyarak, sitenizi ona göre şekillendirebilirsiniz. (Echo satırını silmek şartıyla)

<?php if($tarayici == 'iphone'){ ?>BUNLARI YAP<?php } ?>

Bu kod yardımıyla İF komutunun arasına istediğimizi yazarak, sitemizin iphone’daki görünüşünü de ayarlayabiliriz.

HomeScreen iconu eklemek ve Kısa Başlık

Şimdi yapmak istediğimiz iki şey var. Sitemizin Logosunu iPhone’un HomeScreen’ine eklenecek şekle getirmek ve Kısa bir isim.

Bunları yapmak için aşağıdaki kodu kullanacağız.

<?php if($browser == 'iphone'){ ?>
  <title>iPhone Kısa Başlık</title>
<?php }else{ ?>
  <title>Normal Başlık</title>
<?php } ?>

Bu kodla birlikte iPhone’dan Safari ile girdiğimizde HomeScreen butonu eklemek istediğimizde Kısa Başlık karşımıza çıkacak. Şimdi bunun için bir de Logo eklemek gerek.

Aslında Logo yapımı oldukça kolay birşey. 57×57 px’lik bir iconu sitenizin kök dizinine atmanız yeterlidir. (Örneğin apple-icon.png) Geriye kalanı iPhone anlar ve uygular.

Zoom’lamayı durdurma

iPhone’da elimizle Zoom’lama özelliğini biliyoruz. Eğer tasarımızı tam olarak yapmışsak ve zoomlama yapılmasını istemiyorsak, aşağıdaki kodu kullanmamız gerekmektedir.

<?php if($browser == 'iphone'){ ?>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0" />
<?php } ?>

Stil tasarımına Başlayalım

Çoğu iPhone Web site tasarımcısı, kullanıcıyı tamamen farklı bir siteye taşımayı seçer. (Örnek: mobile.example.com)

Biz bunu istemiyoruz. Sitemizin aynı yerde olmasını ve iPhone için ayrı bir CSS kodlamaya sahip olmasını istiyoruz. Yukarıdaki örneklerle tamamen farklı bir CSS dosyasını iPhone için çalıştırabilir ve bu şekilde siteyi yeniden tasarlayabiliriz ama eğer bunun varolan CSS dosyası üzerinde olmasını istiyorsak aşağıdaki gibi yapmamız gerekir.

/*--- Ana CSS kodu ---*/

/*------------------------------------*
    $IPHONE
*------------------------------------*/
@media screen and (max-device-width: 480px){
    /*--- iPhone CSS Kodları ---*/
}

Medya sorgusundan önceki bütün CSS kodları bütün platformlarda kullanılabilecek, sonrakiler ise Maksimum cihaz ekran çözünürlüğü 480px ve altında olanlarda kullanılabilecek.

iphone_site_specs-724421

Son iPhone’un ekran genişlik çözünürlüğü daha fazla olabilir, bu yüzden bu ayarla oynayabilirsiniz. Bu şekilde bir tasarım yapılamıyorsa, Birinci bölümde anlattığımız İF komutu ile tamamen farklı bir CSS dosyası gösterilip ona göre tasarım yapılabilir.

iPhone Cihazlarda Genişlik ve Yükseklik Çözünürlükleri

boyut-iphone

Burada önemli olan bazı CSS kodları var. Bunlar Sağa sola yaslanmış divlerin silinmesi, yazı boyutlarının ayarlanması, margin ve padding ayarlarının sıfırlanması ve Resimlerin genişliklerinin ve yüksekliklerinin ekranın %100 ‘ünü kullanması, navigasyon tuşları gibi özellikler.

Bunları aşağıdaki örnek kodları okuyarak çözebilirsiniz.

/*--- Main CSS here ---*/

/*------------------------------------*
    $IPHONE
*------------------------------------*/
@media screen and (max-device-width: 480px){
    body{
        -webkit-text-size-adjust:none;
        font-family:Helvetica, Arial, Verdana, sans-serif;
        padding:5px;
    }
div{
        clear:both!important;
        display:block!important;
        width:100%!important;
        float:none!important;
        margin:0!important;
        padding:0!important;
    }

#nav,#nav li{
        float:none!important;
        clear:both!important;
        margin:0 0 20px 0!important;
        display:block;
        padding:0;
        text-align:left!important;
        width:100%;
    }
    #nav{
        border:1px solid #ccc;
        padding:5px;
        border-radius:5px;
    }
    #nav li{
        margin:0!important;
    }
    #nav li a{
        display:block;
    }
img{
        max-width:100%;
        height:auto;
    }
}

Bu yazı ile birlikte Aklınızda sıfırdan bir mobil tasarım yapmak için birşeyler oluşmuş olmalı. iPhone’un ve Diğer Akıllı telefonlar için yapılması gereken mobil website yollarının temelinde de bu bilgiler yatmakta.

Bu örneklere kendi tecrübenizi de katarak, daha fazla insana destek veren bir websitesi yapabilirsiniz. Bir dahaki yazımıza kadar Sağlıcakla Kalın.

ITC | İlkteknoloji