Site icon Mobil Uygulama Merkezi

Webview Uygulama Yapmak

Mobil Uygulama Merkezi

Webview Uygulama Yapmak

Mobil uygulama merkezi, çoklu mobil uygulama yapma sitesi ile ios ve android webview uygulama yapmak  sadece birkaç adımda mümkündür.

Öncelikle mobil uyumlu bir site sahibi olmalı veya mobil uygulamamız içerisine entegre edeceğimiz  sitenin mobil uyumlu veya HTML5 bir tasarıma sahip olması gerekir. Bu özelliklere sahip bir websitemiz varsa  yapmamız gereken sadece aşağıda vereceğimiz iframe kod ile sitenizi mobil uygulama içerine aktarmak.

Adım 1: Mobil Uygulama Şablon Seçimi

Birinci adım olarak, websitenizin mobil uygulama açılır açılmaz ekrana gelmesini sağlıyoruz. Bunun için “Dizayn” sekmesinde “Ekran planınızı değiştirin” bölümünden 1 ve 9 numaralı  menu dizilimini seçiyoruz.

  

 

Yukarıdaki 1 ve 9 nolu menü dizilimleri ilk  olarak kullandığınız özelliği ana ekrana taşır. Bizde webview bir uygulama yapmayı planladığımız için Html Kod özelliğini ilk sıraya alcağız.

Adım 2: Html Özelliği ile İframe Kullanma

İframe özelliği ile sitenizin belirli bir bölümünü veya tamamını uygulama içerisine aktarabilirsiniz. Aşağıda vereceğimiz  iframe kodunu özellikler sekmesinde Html özelliğini aktif ederek, ekrandaki kod yazma bölümüne ekleyebilir, üzerinde css  değişkenlerini kendinize göre ayarlayabilirsiniz.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<style type=”text/css”>

body, html

{

margin: 0; padding: 0; height: 100%; overflow: hidden;

}

#content

{

position:absolute; left: 0; right: 0; bottom: 0; top: 0px;

}

</style>

</head>

<body>

<div id=”content”>

<iframe width=”100%” height=”100%” frameborder=”0″ src=”http://siteniz.com/“ />

</div>

</body>

</html>

 

Adım 3: Menü ve Üst Barı kaldırmak

Eklediğimiz iframe kod sonrası, mobil uygulamamızda sadece websitesinin çalışmasını istiyorsak, açılan menü ve üst kısımda bulunan barı kaldırabiliriz. Bunun için altta vereceğimiz kodu  “renkler” sekmesinde  bulunan “GELIŞMIŞ ÖZELLEŞTIRME CSS / SCSS” özelliği aktif ederek, kod alanına eklemeniz gerekir.

 
.has-header {
    top: 0px !important;
}

.platform-ios.platform-cordova:not(.fullscreen) .has-header {
    top: 20px !important;
}

ion-nav-bar {
    display: none;
}
Exit mobile version