PHP web site nasıl mobil uyumlu yapılır?


Selamlar,

Makaleyi anlatırken PHP web sitenizden kastınız özel bir yazılım olan web sitenizin nasıl mobil uyumlu olacağanı araştırdığınızı varsayıyorum.

Şimdi cevab komik olacak fakat makalenin sonunda mobil uyum konusuna neden böyle bir girişte bulunduğumu anlayacaksınız! Evet, işte cevabı; iki yolu var. Ya direkt Simenty dediğimiz yere yalnızca ücret karşılığında anahtar teslim yaptırırsınız ya da kendiniz teker teker uğraşırsınız.

Simenty ile mobil uyumlu yapma

Simenty bugüne kadar bir çok referans edenmiş web sitelerini mobil uyumlu yapan bir Türk girişimi. Evet yalnış duymadınız e-tohuma falan da seçilmişti sitelerine girdiğimde aşağıdaki referans sistemini buluyorum. Çok basit bir şekilde çalışıyor direkt web site adresinizi yazıyorsunuz, ödeme yapıyorsunuz ve aynı görünümde responsive bir şekilde mobil uyumlu web siteniz hazır hale geliyor.

Simenty ile hazırlanan web siteleri
Simenty ile mobil uyum sitesine git

KODLAR İLE MOBİL UYUMLU YAPMA

Bir web siteyi teknik olarak mobil uyumlu yapmak için iki ayrı yöntem vardır. Bunlardan ilki medya sorguları ile; ikincisi ise m.siteadresi.com şeklinde mobil siteyi apayrı bir yazılıma taşımadır.

Google’ın gelecekte önereceği ve ek bir yönlendirmeye gerek duymadan yapılandırılabilen ve benim de kişisel olarak tavsiye ettiğim mobil uyum teknolojisi responsive olandır. Bu yüzden ben de sizlere responsive ile mobil uyumlu yapmayı öğreteceğim.

<a href="#">/** 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 */
}

Üstteki kodu kendinize göre düzenleyin ve mobil uyumlu yapın.

Kolaylıklar dilerim


Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir