Soru İPad'in Safari'de arka plan ölçeklemesini düzeltmenin bir yolu var mı?


Bir div kapsayıcısında büyük bir arka plan görüntüsü (2000x1500) kullanan bir web sitem var (% 100 x% 100).

Bu siteyi bir iPad'de Safari'de açtığımda, içerikten (~% 80) farklı bir oranda küçültülüyor (~% 40).

Arka planı,% 100 genişlik ve% 100 yükseklik ve taşma ayarı "gizli" olan bir div içindeki bir img etiketine taşıdım. Tam olarak aynı şey olur.

Safari'nin arka plan resimlerini içerikle aynı oranda ölçeklendirmesine yardımcı olabilecek bir CSS Ayarı var mı?


25
2018-06-03 14:21


Menşei




Cevaplar:


İPad için kesinlikle ayrı bir stil sayfası oluşturmalısınız. Bunu yapmak için aşağıdakileri kullanabilirsiniz:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

Bu bağlantıda, web sitenizin iPad'de yönlendirilmesi ve bununla nasıl başa çıkılacağı hakkında bilgi bulabilirsiniz.

Benim tavsiyem, sitenizin iPad sürümü için ayrı bir stil sayfası (css dosyası) oluşturmaktır, ne yaparsanız yapın, sadece onu oluşturmalı ve yukarıda gösterilene benzer bir bağlantı etiketi eklemelisiniz.

İPad sürümü için 2000x1500px boyutunda bir resmin arka planına sahipseniz, iPad'inizi sığacak şekilde küçültebilirsiniz, eğer sorun yaşamanız gereken tek şey buysa. Görüntünün boyutunu 1024 piksele indirmeniz ve iPad için ayrı bir stil sayfasında belirtmeniz gerektiğini söyleyebilirim. Sonuç olarak da sonuç göreceksiniz.

Nasıl olduğunu bilmeme izin ver.

BTW Bu makaleyi de okumalısınız: http://www.inspiredm.com/2010/02/09/ipad-design/


19
2018-06-03 14:25



Bu mükemmel çalıştı, teşekkürler! arka plan kapsayıcısı için sabit bir piksel boyutuna sahip ikinci bir css kullanmaya başladım, ayrıca makale için teşekkürler - +1! - favo
Rica ederim. Yanıtımda bir bağlantıya başvurduğumu fark ettim, ancak bağlantıyı yayınlamadım: iPad yerleşimi yönlendirme hakkında: matthewjamestaylor.com/blog/... - UXdesigner
@UXdesigner tarafından verilen yanıtın sadece bir eki - kullanımı <!--[if IE]>....<![endif]--> etiketleri IE'de kırmayacak şekilde etiketler. - vikmalhotra
Bu yeni retina ekranları ile çalışır? - James McCormack
> "Bu linkte," @WinDesigner hakkında bilgi bulabilirsin "bilgisini bulabilirsin, ya da" atayabilirsin "diyebilir misin? - gmeben


Arka plan tuvalinde arka plan görüntüsü varken, bu benim için işe yaradı ...

body{ -webkit-background-size: 2000px 1400px;}

Açıkçası, boyutların görüntü için doğru boyutta olması gerekiyor.


31
2018-05-06 00:16



Bunun iyi çalıştığını doğrularım. Teşekkür ederim. - madr
Sadece bu hızlı bir düzeltme olarak gerekli, bir çekicilik gibi çalışır. - EinLama
IOS ayrıca 2mp + görüntüleri ölçeklendirir, dikkatli olun stackoverflow.com/questions/2860387/... - vearutop
Çok teşekkür ederim! :) - wowzuzz


Bu sorun, yalnızca <body> etiketine eklenmiş bir arka plan resminiz olduğunda iPad'de gerçekleşiyor gibi görünüyor. Arka plan resmini içeren bir div'a yerleştirirseniz, sorun çözülebilir. Bu, arka plan resminizin "sabit" olması gerekmiyorsa, IE'de arka plan sabit çalışmasını sağlayan teknikler olarak bu harika bir çalışmadır. Resimler için <body> etiketini kullandığınızı belirtin.

Bu iki sitede farkı görebilirsiniz, ilk konumlandırma için <body> etiketini kullanır (arka plan görüntüsünde sabit konumlandırma nedeniyle) ve ikincisi içeren bir div kullanır:

http://www.mricsi.com http://www.collinshirsch.com

Umarım yardımcı olur!

edit - bu tamamen doğru değil - bu sadece bir süredir durum böyle görünüyor ve neden arkasındaki nedeni belirsizdir.


2
2017-09-15 17:48





Bir div içinde 5400x556 (kaydırma) arka plan görüntüsü var. Bir .jpg olarak büyük ölçüde aşağı ölçeklenir, çünkü .png iyi olur. Tek sorun şu ki .png 5 meg. Grr.

Ayrı stil sayfalarında iyi bir çağrı olsa da.

iyi şanslar

owen


1
2017-09-28 06:34





Kullanırım:

 body {min-width:2000px; min-height:1500px }

0
2017-09-24 13:49





İPad için ayrı bir stil sayfası oluşturmak için @UXdesigner çözümünü kullanabilirsiniz. Ancak mevcut stil sayfanızda tek bir deyim kullanabilirsiniz:

@media only screen and (max-device-width: 1024px){
  .yourClassname{
    max-width: 500px;
  }
}

ve elbette kullanabileceğiniz telefonlar gibi daha küçük cihazlar için:

@media only screen and (max-device-width: 480px){
  .yourClassname{
    max-width: 100px;
  }
}

Bu önerilerin yalnızca CSS3(en son cihazlar bunu kabul ediyor)


0
2017-08-03 13:11