我的模板頁面會在移動設備上自動縮放

出於某種原因，無論何時，當我使用實際的移動設備在手機模板上打開其中一個頁面時，它會自動放大頁面。有什麼方法可以確保頁面始於100％？我的模板頁面會在移動設備上自動縮放

這是我的代碼。

<html> 
    <head> 
    <style> 
     li{ 
     line-height:3em; 
     } 
     ad{ 
     padding: 0 0 0 4em; 
     } 
     n{ 
     margin:10; 
     } 
     p { 
     font-size: 130%; 
     } 
     a:link { color: white; text-decoration: none} 
     mm { 
     float: left; 
     width: 100%; 
     padding: 0; 
     margin:0; 
     list-style-type: none; 
     } 
     m { 
     width: 6em; 
     text-decoration: none; 
     color: white; 
     margin:10px; 
     background-color: #243d77; 
     padding: 0.9em 0.6em; 
     } 
    </style> 
    <title>[Content]</title> 
    <link type="text/css" rel="stylesheet" href="/stylesheets/[Content].css" /> 
    <script type="text/javascript" src="/js/jquery.min.js"></script> 
    <script type="text/javascript" src="/js/pngFix/jquery.pngFix.js"></script> 
    <script type="text/javascript" src="/js/jquery.cycle.all.latest.js"></script> 
    <script type="text/javascript">  
     shuffle = function(o){ //v1.0 
     for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
     return o; 
     }; 

     $(document).ready(function() { 
     $(document).pngFix(); 
     }); 
    </script> 
    </head> 
    <body> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <div id="container"> 
     <div id="header"> 
     <div class="logo"> 
      <a href="/index.htm"> 
      <img alt="" width="189" height="69" src="[Content]" /> 
      </a> 
     </div> 
     <div class="loginlink"> 
      <a href="client-login.htm"> 
      Client Access Click Here 
      </a> 
     </div> 
     </div> 
     <div id="subheader"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <div style="clear: left;"></div> 
     <div id="wrapper1"> 
      <div style="text-align: center;"> 
      </div> 
      <div id="wrapper2"> 
      <div style="text-align: center;"> 
      </div> 
      <div id="maincol"> 
       <div style="text-align: center;"> 
       </div> 
       <div id="leftcol"> 
       <div style="text-align: center;"> 
        <mm> 
        <li> 
         <m> 
         <n> 
          <a href="#"> 
          &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; Home &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
          </a> 
         </n> 
         </m> 
        </li> 
        <li></li> 
        <li> 
         <m> 
         <n> 
          <a href="#"> 
          &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; What We Do &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
          </a> 
         </n> 
         </m> 
        </li> 
        <li></li> 
        <li> 
         <m> 
         <n> 
          <a href="#"> 
          &nbsp; &nbsp; Why Work With Us&nbsp; &nbsp;&nbsp; &nbsp; 
          </a> 
         </n> 
         </m> 
        </li> 
        <li></li> 
        <li> 
         <m> 
         <n> 
          <a href="#"> 
          &nbsp;How We Provide Value &nbsp; 
          </a> 
         </n> 
         </m> 
        </li> 
        <li></li> 
        <li> 
         <m> 
         <n> 
          <a href="#"> 
          &nbsp;&nbsp; Who We Work With &nbsp;&nbsp; &nbsp; 
          </a> 
         </n> 
         </m> 
        </li> 
        <li></li> 
        <li> 
         <m> 
         <n> 
          <a href="#"> 
          Results We've Achieved&nbsp; 
          </a> 
         </n> 
         </m> 
        </li> 
        <li></li> 
        <li> 
         <m> 
         <n> 
          <a href="#"> 
          &nbsp; &nbsp; Where We Service &nbsp;&nbsp; &nbsp;&nbsp; 
          </a> 
         </n> 
         </m> 
        </li> 
        <li></li> 
        <li> 
         <m> 
         <n> 
          <a href="#"> 
          &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; [Content] &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; 
          </a> 
         </n> 
         </m> 
        </li> 
        <li></li> 
        <li> 
         <m> 
         <n> 
          <a href="#"> 
          &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; Get In Touch &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; 
          </a> 
         </n> 
         </m> 
        </li> 
        </mm> 
       </div> 
       <mm> 
       </mm> 
       </div> 
      </div> 
      {tag_pagecontent} 
      </div> 
     </div> 
     </div> 
     <div style="clear: both;"></div> 
     <div id="footer"> 
     <p>&copy; 2014 [Content]</p> 
     <p> 
     </p> 
     <ul> 
      <li><a href="/sitemap.htm">Site Map</a></li> 
      <li><a href="/disclaimer.htm">Disclaimer</a></li> 
      <li><a href="/privacy.htm">Privacy Policy</a></li> 
     </ul> 
     </div> 
    </div> 
    </body> 
</html>

來源

2014-09-04 David

你試過添加這個嗎？ – Sunand 2014-09-04 02:47:42

你真的不應該用' 來做你的間距，你應該使用CSS。 – RevanProdigalKnight 2014-09-04 02:58:04

這種行爲是依賴於設備的，現代的Android 4.x的手機都被稱爲「中概述打開網頁」，默認情況下啓用，造成網頁頁面完全顯示（無變焦）選項。

通常，強制100％縮放級別和禁用用戶縮放電話的能力是正確顯示（正確設計的）移動網站的常見做法。這是通過下面顯示的視口meta標籤實現的。

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

的initial-scale=1.0值意味着變焦設定爲100％，並且，user-scalable=0意味着用戶縮放被禁用。你可以玩initial-scale的價值，但結果可能因平臺而異。

嘗試設置這個元標記，看看它的工作原理，並迫使50％的initiall變焦：

<meta content='width=device-width, initial-scale=0.5, maximum-scale=1.0, user-scalable=1' name='viewport' />

再次，這是一個非常規使用的標籤，當你試圖迫使縮小，而不是放大，但嘗試它，並告訴它是否可以工作...

來源

2014-09-04 03:01:56 andreszs

我的模板頁面會在移動設備上自動縮放

回答

相關問題