我需要将内容的最小宽度设置为480px,这样任何在屏幕上查看的人都必须滚动才能查看内容。这样做的原因是不可能使布局在此分辨率以下工作。
这就是我所拥有的
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
我需要这样的东西,但显然这不起作用
<meta name="viewport" content="width=device-width,, min-width=480px, initial-scale=1, maximum-scale=1, minimum-scale=1">
答案 0 :(得分:3)
这是一个仅针对平板电脑和桌面提供网络响应版的解决方案。
此代码我们动态禁用移动版本。在移动设备上:
<!-- Meta Responsive -->
<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>
window.onload = function () {
if(screen.width <= 767) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=767');
}
}
</script>
<!-- End of Meta Responsive -->
答案 1 :(得分:2)
听起来你正试图在页面上设置内容的最小宽度,而不是视口本身。This article可能会帮助你。
您可能希望这样做:
@media all and (max-width: 480px) {
// styles assigned when width is smaller than 480px;
}
像这样的东西,在那个区块中你可以在宽度为480px或更低的屏幕上发送内容样式。
希望这就是你要找的东西。
答案 2 :(得分:0)
我尝试了很多代码并取得了一些好的结果,做了一种简单的视口...但是,我认为最好的方法是创建一个完全响应的网站(最高320px;)
这是最好的方法:
<script>
//VIEWPORT
function mobileFriendly() {
setTimeout(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
var ww = ( document.documentElement.clientWidth < window.screen.width ) ? jQuery(window).width() : window.screen.width; //get proper width
var mw = 725;
//alert ("width" + ww);
var ratio = ww / mw; //calculate ratio
//alert ("ratio: " + ratio);
if( ratio < 1 ){ //smaller than minimum size
jQuery("meta[name='viewport']").attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + mw);
}else{ //regular size
jQuery("meta[name='viewport']").attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
}
}
}, 600);
}
jQuery( document ).ready( function(){
mobileFriendly()
});
window.addEventListener("orientationchange", mobileFriendly, false);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta content="user-scalable=yes, maximum-scale=1.6, width=device-width, initial-scale=1, target-densitydpi=device-dpi" name="viewport">
答案 3 :(得分:-2)
你的第二个解决方案确实有效 - 你可能没有看到的是你在width=device-width
之后有两个逗号,这可能就是你没有工作的原因。我复制了它并没有问题。
有时新鲜的眼睛会做到这一切。
编辑: 但是,是的,在您的情况下,媒体查询正是您所需要的。
答案 4 :(得分:-4)
<script>
//viewport just for screens under/with 480px width other screen widths show the whole page resized
if(screen.width <= 480) {
document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");}
//for devices with more and less/equal than 480px width
window.onresize = changeViewport;
function changeViewport(){
if(screen.width <= 480) {
document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");}
if(screen.width > 480) {
document.getElementById("viewport").setAttribute("content", "");}
}
</script>