Question

我已将以下视图端口metatag添加到PHTML文件的头部：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

但是当我尝试在移动设备中查看它时，显示非常狭窄，就像网站只显示移动屏幕的一半，而另一半的移动设备是空白。任何人都可以指导什么错？我必须添加任何CSS以使其看起来很好或视口设置中的任何更改。我试图为视口添加100％的css。

Answer 1

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

CSS

@media screen and (max-width: 750px){
  #yourid{
    width: px;
  }
  .yourclass{
    width: px;
  }
}

@media screen and (min-width: 360px){
  #yourid{
    width: px;
  }
  .yourclass{
    width: px;
  }
}

@viewport{
    zoom: 1.0;
    width: device-width;
}

使用javascript。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
var li = document.createElement('link');
li.type = 'text/css';  
var href='mobile.css';   
//var href=('https:' == document.location.protocol ? 'https://' : 'http://') +'thesite.com/api/widgets/pages.css';
li.setAttribute('href', href);
li.setAttribute('rel','stylesheet');
var s = document.getElementsByTagName('head')[0];
s.appendChild(li, s);
}

视口元标记

1 个答案: