我的模板页面会在移动设备上自动缩放

出于某种原因，无论何时，当我使用实际的移动设备在手机模板上打开其中一个页面时，它会自动放大页面。有什么方法可以确保页面始于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

我的模板页面会在移动设备上自动缩放

回答

相关问题