Firefox ve Opera'da bir HTML öğesini nasıl yakınlaştırabilirim?

Question 1

zoomMülkiyet IE, Google Chrome ve Safari'de çalışıyor, ancak Firefox ve Opera çalışmıyor.

Bu özelliği Firefox ve Opera'ya eklemek için herhangi bir yöntem var mı?

Question 2

Bu kodu deneyin, bu işe yarayacak:

-moz-transform: scale(2);

Sen başvurabilirsiniz bu .

Question 3

Yakınlaştırma ve dönüştürme ölçeği aynı şey değildir. Farklı zamanlarda uygulanırlar. Yakınlaştırma, oluşturma gerçekleşmeden önce uygulanır, sonra dönüştürülür. Bunun sonucu, genişlik / yükseklik =% 100 başka bir div'in içine yerleştirilmiş, sabit boyutlu bir div alırsanız, yakınlaştırma uygularsanız, iç yakınlaştırmanızın içindeki her şey küçülür veya büyür, ancak dönüşümün tamamını uygularsanız iç div küçülür (genişlik / yükseklik% 100 olarak ayarlansa bile, dönüşümden sonra% 100 olmayacaklar).

Question 4

Benim için bu, yakınlaştırma ve ölçekleme dönüşümü arasındaki farkı karşılamak için çalışıyor, istenen amaçlanan başlangıç noktasına ayarlayın:

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

Question 5

Onun scaleyerine kullanın ! Birçok araştırma ve testten sonra bu eklentiyi tarayıcılar arasında elde etmek için yaptım:

$.fn.scale = function(x) {
    if(!$(this).filter(':visible').length && x!=1)return $(this);
    if(!$(this).parent().hasClass('scaleContainer')){
        $(this).wrap($('<div class="scaleContainer">').css('position','relative'));
        $(this).data({
            'originalWidth':$(this).width(),
            'originalHeight':$(this).height()});
    }
    $(this).css({
        'transform': 'scale('+x+')',
        '-ms-transform': 'scale('+x+')',
        '-moz-transform': 'scale('+x+')',
        '-webkit-transform': 'scale('+x+')',
        'transform-origin': 'right bottom',
        '-ms-transform-origin': 'right bottom',
        '-moz-transform-origin': 'right bottom',
        '-webkit-transform-origin': 'right bottom',
        'position': 'absolute',
        'bottom': '0',
        'right': '0',
    });
    if(x==1)
        $(this).unwrap().css('position','static');else
            $(this).parent()
                .width($(this).data('originalWidth')*x)
                .height($(this).data('originalHeight')*x);
    return $(this);
};

usege:

$(selector).scale(0.5);

Not:

Sınıfı olan bir sarmalayıcı oluşturacaktır scaleContainer. İçeriği şekillendirirken buna dikkat edin.

Question 6

zoom: 145%;
-moz-transform: scale(1.45);

daha güvenli tarafta olmak için bunu kullan

Question 7

Ben değiştirecek zoomiçin transformdiğer cevaplar tarafından açıklandığı gibi, eşdeğer oldukları, çünkü her durumda. Benim durumumda transform-origin, eşyaları istediğim yere yerleştirmek için mülk uygulamak da gerekliydi .

Bu benim için Chome, Safari ve Firefox'ta çalıştı:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

Question 8

Tüm tarayıcılarda aynı şekilde çalışmaz. Http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage adresine gittim ve zoom ve -moz-transform için stil ekledim. Aynı kodu firefox, IE ve chrome'da çalıştırdım ve 3 farklı sonuç aldım.

<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock"  />

</body>
</html>

Question 9

Bir süredir buna küfrediyorum. Zoom kesinlikle çözüm değil, kromda çalışıyor, kısmen IE'de çalışıyor ama tüm html div'i hareket ettiriyor, firefox hiçbir şey yapmıyor.

Benim için işe yarayan çözümüm, hem ölçekleme hem de çeviri kullanmak ve ayrıca orijinal boy ve ağırlığı eklemek ve ardından div'in kendisinin yüksekliğini ve ağırlığını ayarlamaktı:

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

Açıkçası bunları kendi ihtiyaçlarınıza göre değiştirin. Bana tüm tarayıcılarda aynı sonucu verdi.

Question 10

tüm sayfayı fireFox'ta yakınlaştırmak için bu kodu deneyin

-moz-transform: scale(2);

Bu kodu kullanıyorsam, y ve x ile ölçeklenen sayfanın tamamı doğru şekilde yakınlaştırılmıyor

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

FireFox'ta css kullanarak sayfanızı büyütemezsiniz

**

Question 11

bu sizin için doğru çalışıyor mu? :

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);

Question 12

Benim için bu, IE10, Chrome, Firefox ve Safari ile iyi çalışıyor:

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

Bu, tüm içeriği% 50 oranında yakınlaştırır.

Question 13

Yalnızca doğru ve W3C uyumlu cevap: <html>nesne ve rem. Ölçeği küçültürseniz dönüştürme düzgün çalışmaz (örneğin ölçek (0,5).

Kullanım:

html
{
   font-size: 1mm; /* or your favorite unit */
}

ve <body>metrik birimler yerine kodunuzda "rem" birimini (stiller dahil ) kullanın. Değişiklik olmadan "%" s. Tüm arka planlar için arka plan boyutunu ayarlayın. Diğer öğeler tarafından miras alınan gövde için yazı tipi boyutunu tanımlayın.

1.0 dışında yakınlaştırmayı etkinleştirecek herhangi bir koşul oluşursa etiketin yazı tipi boyutunu değiştirin (CSS veya JS aracılığıyla).

Örneğin:

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

Bu, yakınlaştırmaya eşdeğerdir: clientX ile JS'de sorunsuz 0,5 ve sürükle bırak olayları sırasında konumlandırma.

Medya sorgularında "rem" kullanmayın.

Gerçekten yakınlaştırmaya ihtiyacınız yok, ancak bazı durumlarda mevcut siteler için daha hızlı bir yöntem olabilir.