2013年12月11日 星期三

支援 Retina 的網頁・二

WWW Retina Support - Part 2

上月試過用 Javascript 製作「支援 Retina 的網頁」。今早在瀏覽 YouTube 時發現原來可以用 CSS 的方式達成,於是著手編寫了簡單的 HTML 來測試,證實是可行的。代碼如下:
<html>
 <head>
  <meta charset="utf-8">
  <title>Retina CSS Test version 1.00</title>

  <style>
   *  {
    margin: 0px;
    padding: 0px;

    font-family: "Helvetica Neue", "Verdana";
    font-weight: normal;
    font-size: 14px;
    color: #ffffff;
    text-shadow: 1px 1px #000000;
   }
   body  {
    background-color: #404040;
    margin: 0 0 0 0;
    font-family: "Helvetica Neue", "Verdana";
   }
   a  {
    text-decoration: none;
   }
   a:hover  {
    color: #ff0000;
   }

   #heading  {
    font-family: "Helvetica Neue", "Verdana";
    font-weight: lighter;
    font-size: 40px;
    color: #ffffff;
    text-align: center;
   }
   #description  {
    font-family: "Helvetica Neue", "Verdana";
    font-weight: lighter;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
   }
   #window  {
    background-color: #303030;
    margin: 8 8 8 8;
    padding: 10 10 10 10;
    border-radius: 8px;
    width: 600px;
    text-align: center;
   }
   #window table  {
    margin-left:auto; 
    margin-right:auto;

    font-family: "Helvetica Neue", "Verdana";
    text-align: center;
   }
   #subHeading  {
    font-family: "Helvetica Neue", "Verdana";
    margin-bottom: 10px;
    font-weight: lighter;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
   }
   #imageDiv  {
    width: 300px;
    height: 447px;
    background-image: url("./images/android.png");
    background-image: -webkit-image-set(
     url("./images/android.png") 1x,
     url("./images/android@2x.png") 2x
    );
    background-image: -moz-image-set(
     url("./images/android.png") 1x,
     url("./images/android@2x.png") 2x
    );
    background-image: -image-set(
     url("./images/android.png") 1x,
     url("./images/android@2x.png") 2x
    );
   }
  </style>

  <script type="text/javascript">
  </script>
 </head>

 <body><center>
  <div id="heading">Retina CSS Test</div>
  <div id="subHeading">Version 1.00, written by Pacess, 2013-Dec-11.</div>
  <div id="description">This CSS shows how to load @2x retina image according to the device.</div>

  <div id="window"><center>
   <div id="imageDiv"></div>
  </center></div>
 </center></body>
</html>

沒有留言: