我已将以下视口(viewport)元标记添加到 PHTML 文件的头部:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
但是当我尝试在手机上查看它时,它显示得非常窄,就像网站只显示在手机屏幕的一半中,而手机的另一半是空白的。 任何人都可以指导出什么问题了吗?我必须添加任何 CSS 以使其看起来不错或视口(viewport)设置中的任何更改。 我试图为视口(viewport)添加 css 100%。
最佳答案
<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);
}
关于html - 视口(viewport)元标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22813084/