Web sitenizi (Responsive) Mobil Uyumlu Yapın

2
PANELİ GİZLEKONU HAKKINDA DESTEK ALMAK İÇİN 11820'Yİ ARAYABİLİRSİNİZ TIKLA ARA

Responsive web sitesi ! evet kulağa hoş geliyor kulağa hoş geldiği gibi artık Google‘a da hoş geliyor. Google yeni güncellemesinde artık “Mobil uyumlu” olup olup olmadığını kontrol edip buna göre siteyi Google aramalarında öne çıkaracak.

mobil-responsive-1

Artık çoğu internet kullanıcıları masaüstü değilde mobilden giriş yapıyor ve bu da mobilde girişe etki edecek bir görünüm elde etmek için web siteyi responsive olup olmadığını kontrol ediyor.

mobil-responsive-3

Eğer siteniz WordPress ise Bir kaç eklenti mevcut .

WordPress Mobil Eklentileri

  • WPTouch Mobile Plugin
  • JetPack
  • WP Mobile Detector
  • WordPress Mobile Pack 2.0

Bunlardan WpTouch eklentisini önerebilirim.

Html temalar için ise; Web sitemizi nasıl mobil uyumlu hale getirebiliriz buna bakalım, tabiki bunun için biraz CSS bilginizin olması şart. Aşağıdaki kodlar ile Web sitenizi mobil uyumlu hale getirebilirsiniz. Tarayıcı genişliğine stiller aşağıdaki gibidir.

mobil-responsive-2

Örneğin .wrapper class ının normal boyutu 900px ise 480px de .wrapper {480px;} yapmanız gerekiyor tüm divlerinizi aşağıdaki genişliklere göre yerleştirip uyumlu hale getirebilirsiniz.


/** Mobilde Dikey konumdayken **/
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}

/** Mobilde Yatay konumdayken **/
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}

/** Mobilde Yatay yada Dikey **/
@media screen and (max-device-width: 640px){
/* some CSS here */
}

/** iPhone 4 ve üstü **/
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/** Tabletler için #### **/
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}

2 YORUMLAR

CEVAP VER

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.