如何使我的简单网站 - 测验适合平板电脑和手机？

2 回答

• 0

  目前我正在使用下面的代码 . 这符合我当前的要求（iPad，iPhone，电脑之间的区别） . 如果有人为所有可能的设备提供防弹解决方案，我很高兴你能与我分享:-)谢谢！

  $(document).ready(function() {
  
      var isMobile = (/iPhone|iPod|Android|BlackBerry/).test(navigator.userAgent);
      var isTablet = (/iPad/).test(navigator.userAgent);
  
      if(isMobile) {
          $('<meta name="viewport" content="initial-scale=0.45, maximum-scale=0.45, width=device-width, user-scalable=yes">').appendTo('head');
      } else if(isTablet) {
          $('<meta name="viewport" content="initial-scale=0.95, maximum-scale=0.95, width=device-width, user-scalable=no">').appendTo('head');
      } else {
          $('<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">').appendTo('head');
      }
  });
  

  回复于 2024-05-17T17:28:17+08:00
• 0

  这个元视口无法帮助你，因为 initial-scale 是1.那么's why it'对于iPhone来说太大了：你告诉设备这个页面的初始比例必须是其大小的100％（这里：1024px宽度），你必须删除此参数或将其设置为较低（0.5或0.625，为640/1024 = 0.625） .

  试试（这适用于iPhone和iPad）：

  <meta name="viewport" content="width=device-width">
  

  或者（这在iPad上应该非常小）：

  <meta name="viewport" content="initial-scale=0.6,user-scalable=no,maximum-scale=1,width=device-width">
  

  编辑：

  这应该工作：

  <meta name="viewport" content="width=1024">
  

  我在一个编码不好的移动网站上使用了这个技巧，它强制视口为1024并使其适合设备屏幕 . 您可以向元数据添加任何参数 .

  回复于 2024-05-17T17:28:17+08:00