Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

Elementleri farklı cihazlarda aynı pozisyonlarda göstermek

 8 Mesajlar 1.106 Okunma
acebozum
tr.link

#1
berrynetwork berrynetwork WM Aracı Kullanıcı
  • Üyelik 08.04.2014
  • Yaş/Cinsiyet 40 / E
  • Meslek web design ve yazılım
  • Konum Antalya
  • Ad Soyad N** U**
  • Mesajlar 181
  • Beğeniler 16 / 24
  • Ticaret 2, (%100)
Merhaba arkadaşlar, aşağıdaki resimlerde de görebileceğiniz gibi sayfaya eklenen divlerim bulunuyor. Draggable ile kullanıcı bu divleri sayfanın istediği yerine yerleştiriyor. Ancak bilgisayarda bakarken divin pozisyonu ile cep telefonunda bakarken divin pozisyonu birbirini tutmuyor. Bunu sağlayabileceğim bir yöntem biliyor musunuz?

Bunun dışında birde sayfaya eklenen divlerin ekran boyutuna göre yüksekliğinin ve genişliğinin ayarlaması lazım otomatik olarak. Genişlik ve yüksekliğe yüzde vermeyi denedim ancak yine farklı çözünürlüklerde saçmalamaya başladı.

Bilgisi olan arkadaşlar yardım ederse sevinirim.

Bilgisayardaki görüntü



Cep telefonundaki görüntü

 

 

elektronikssl
webimgo

#2
DenizOZTURK DenizOZTURK WM Aracı Kullanıcı
  • Üyelik 02.02.2014
  • Yaş/Cinsiyet 26 / E
  • Meslek -
  • Konum Diğer
  • Ad Soyad D** Ö**
  • Mesajlar 478
  • Beğeniler 189 / 158
  • Ticaret 4, (%100)
jquery.resize() ile yapabilirsiniz,

if ($(document).width() < 993) {
alert ("Ekran değişimi algılandı !");
}
else {
alert ("PC");
}

Bu arada elementleri şuan nasıl konumlandırdığınızı söylerseniz alternatif bir çözüm daha var.
berrynetwork

kişi bu mesajı beğendi.

#3
berrynetwork berrynetwork WM Aracı Kullanıcı
  • Üyelik 08.04.2014
  • Yaş/Cinsiyet 40 / E
  • Meslek web design ve yazılım
  • Konum Antalya
  • Ad Soyad N** U**
  • Mesajlar 181
  • Beğeniler 16 / 24
  • Ticaret 2, (%100)
bilgi için teşekkürler hocam bu yöntemi deneyeceğim. Kullandığım yöntem şu şekilde açıklamaya çalışayım. Kullanıcı divi draggable ile koumlandırdığında stop function elementin top left değerlerini px cinsinden alıyor. Yani atıyorum 100px soldan 50 px üstten gibi. Ama tabi ekran boyutu değişince o 100 ve 50 pixel farklı yerlerde olduğu için konumlama farklı oluyor.
 

 

#4
DenizOZTURK DenizOZTURK WM Aracı Kullanıcı
  • Üyelik 02.02.2014
  • Yaş/Cinsiyet 26 / E
  • Meslek -
  • Konum Diğer
  • Ad Soyad D** Ö**
  • Mesajlar 478
  • Beğeniler 189 / 158
  • Ticaret 4, (%100)

berrynetwork adlı üyeden alıntı

bilgi için teşekkürler hocam bu yöntemi deneyeceğim. Kullandığım yöntem şu şekilde açıklamaya çalışayım. Kullanıcı divi draggable ile koumlandırdığında stop function elementin top left değerlerini px cinsinden alıyor. Yani atıyorum 100px soldan 50 px üstten gibi. Ama tabi ekran boyutu değişince o 100 ve 50 pixel farklı yerlerde olduğu için konumlama farklı oluyor.


CSS Viewport birimleriyle daha rahat yapılabilir bahsettiğiniz işlem.

Basit bir örnek;
https://codepen.io/denizozturk34/pen/jajJWp/right/

Detaylı kaynak : Dev.Opera
 

 

wmaraci
wmaraci

#5
berrynetwork berrynetwork WM Aracı Kullanıcı
  • Üyelik 08.04.2014
  • Yaş/Cinsiyet 40 / E
  • Meslek web design ve yazılım
  • Konum Antalya
  • Ad Soyad N** U**
  • Mesajlar 181
  • Beğeniler 16 / 24
  • Ticaret 2, (%100)
evet viewport ile yapmayıda denedim aslında ama yine eklenen divler arasındaki mesafeler ve konumlar her cihazda aynı yerde çıkmadı maalesef. Ya ben yanlış bişey yaptım yada yöntem benim ihtiyacımı karşılamıyor. Nasıl yapacağımı bi türlü çözemedim günlerdir.
 

 

#6
cArleone cArleone WM Aracı Kullanıcı
  • Üyelik 26.11.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek Web master
  • Konum Isparta
  • Ad Soyad A** M**
  • Mesajlar 225
  • Beğeniler 85 / 59
  • Ticaret 9, (%100)
Konumlarını px değilde yüzde olarak saklarsan sorunu çözelirsin gibi.örneğin obje x 100px.kapsayıcı alanın genişliğide 1000px diyelim.leftine 10% verirsen gene aynı yerde olacak.kapsayıcı ufalınca,objenin konumuda buna göre azalacaktır.

Px yüzdeye çevirmek için
(Obje konumu / kapsayıcı objenin genişliği)*100
Şeklinde yapabilirsin.
 

 

www.ustaderslik.com

#7
berrynetwork berrynetwork WM Aracı Kullanıcı
  • Üyelik 08.04.2014
  • Yaş/Cinsiyet 40 / E
  • Meslek web design ve yazılım
  • Konum Antalya
  • Ad Soyad N** U**
  • Mesajlar 181
  • Beğeniler 16 / 24
  • Ticaret 2, (%100)
hocam teşekkürler bilgi için. Yüzde ile daha önce denedim ancak kapsayıcı olarak px değilde yüzde kullanıyorum. Yani sınır sayfanın çözünürlüğü oluyo haliyle. O yüzden yüzde vermek işimi görmedi denemelerimde. Sayfa boyutu değiştiğinde divler üst üste binmeye falan başladı.
 

 

#8
berrynetwork berrynetwork WM Aracı Kullanıcı
  • Üyelik 08.04.2014
  • Yaş/Cinsiyet 40 / E
  • Meslek web design ve yazılım
  • Konum Antalya
  • Ad Soyad N** U**
  • Mesajlar 181
  • Beğeniler 16 / 24
  • Ticaret 2, (%100)

DenizÖZTÜRK adlı üyeden alıntı

jquery.resize() ile yapabilirsiniz,

if ($(document).width() < 993) {
alert ("Ekran değişimi algılandı !");
}
else {
alert ("PC");
}

Bu arada elementleri şuan nasıl konumlandırdığınızı söylerseniz alternatif bir çözüm daha var.


Çözüm için Deniz arkadaşımıza teşekkür ederim. aşağıdaki linkte örnekle görebilirsiniz nasıl yapılması gerektiğini.

https://codepen.io/denizozturk34/pen/KyjEeE?editors=1100
DenizOZTURK

kişi bu mesajı beğendi.

Css ile düzeltilebilir mi?
css hakkında yardım
wmaraci
wmaraci
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al