Nasıl benim tasarım değişiklikleri kullanıcının tarayıcınızın yazı tipi boyutuna göre böyle, bir IF / veya koşul kurarım?

0 Cevap php

Sorularına cevap: bir değişken olarak kullanılabilir, böylece nasıl bir anlamıyla, kullanıcının yazı ölçeğini tespit ediyor?

Benim sitelerin kullanılabilirliğini genişletmek için kullanıcının yazı ölçekleme (tarayıcı yakınlaştırma değil) dayalı bazı if / else ifadeleri oluşturmak için çalışıyorum.

İki verilen cevaplar tek bir durumda (açıklanan senaryo) için geçici çözümler vardır. Ben başlangıçta sunulan senaryo benim parçası üzerinde iyi bir seçim değildi. Yine de, kullanışlı, ve ben anında ile gelebilir kolay-anlamak için senaryo.

"Yazı tipi boyutu ya da metin içeriği ile ilgili ölçekli ya da CSS yazı tipi boyutu, ilgili birimlere (em, ex, vb) ile boyutlandırılır değişecek elementlerin offsetWidth / Boy özelliklerinin değeri değiştirilir."

Kendi tarayıcı ayarlarında kullanıcı tarafından ayarlanmış gibi, yazı tipi boyutu benim düzeni / css tabanına bir yol anlamaya çalışıyorum. Örneğin, Krom, bir kullanıcı 24 için onun birincil yazı tipi boyutunu belirlemek varsa -

Chrome: "Anahtarı"> "Hood altında" "Seçenekler">> "Değiştir Yazı ve Dil Ayarları"> "Yazı Tipleri ve Kodlama"> Serif font> "Değiştir"> Yazı Boyutu = "24".

-

Nasıl olay alabilirsiniz? Bir örnek ile çalışmak ... Diyelim ki bir set yüksekliği 60px ile bazı DIV bulunuyor var diyelim:

<div class="dwarfer" style="height: 60px;">Whoa?</div>

Varsayılan font boyutu 9 pt. Kullanıcı 24 pt (görme engelli birisi için çok yüksek değil) için onun yazı tipi boyutunu ayarlar, ctrl + minimum yazı tipi boyutu 'aşağı mousewheeling' metin ortaya çıkarmak için neden olmayabilir. Yani, bir değişken tarafından yüksekliğini ayarlamak için en iyisi:

$divheight = 5px/1em

Eğer olay olduğunu ya da bulmak için nasıl biliyorsanız, olayı bulabilirsiniz. Daha sonra, kullanıcı tarafından seçilen tarayıcı tipi boyutuna göre yüksekliğini ayarlamak için $ divheight kullanan PHP bir örnek oluşturun.

Ben yazı tipi değişiklikleri tespit için bulduk yakın çözümdür:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; » charset=utf-8"> 
  <title>Font Resizer Demo</title>
  <script type="text/javascript" src=" » textresizedetector.js"></script>
</head>
<body>
  <h1>Resize me, now!</h1>
</body>
</html>

VE

<script type="text/javascript" » src="textresizedetector.js"></script>
<script type="text/javascript">
  // <![CDATA[
  /* id of element to check for and insert test SPAN into */
  TextResizeDetector.TARGET_ELEMENT_ID = 'header';
  /* function to call once TextResizeDetector was initialized */
  TextResizeDetector.USER_INIT_FUNC = init;
  // ]]>
</script>

Görülen ve en tutorialized gibi http://www.alistapart.com/articles/fontresizing/.

Hatta ben doğrudan benim CSS dosyası içine $ divheight birleştiren sorun yaşıyorum, bu kodu kullanarak:

/* CSS */
<?php
  //variables
  $divheight = 5px/1em
  //end variables

  //styles
  echo '.dwarfer{' . "\n" . 'height:' . $divheight; . "\n" . '}'
  //end styles
?>

Kod yorumlar büyük takdir edilmektedir! Teşekkür ederiz!

0 Cevap

etiketler