我知道你在想这是一个奇怪的请求，但是我目前正在与一个客户打交道，他给了我一个模板，并决定在浏览器中看到它并完成所有HTML后，他希望它小70%(!!!!)。这样就把为我们俩完成的所有工作都抛到了脑后。如果我可以将比例调整为0.7(70%)，那将是完美的，并且元素仍然可以按原样进行。谢谢! 最佳答案 body{zoom:0.7;transform:scale(0.7);transform-origin:00;-ms-transform:scale(0.7);-ms-transform-origin:00;-moz-transform:
对此众说纷纭，但在设计网页时，应该迎合的最佳窗口大小或视口(viewport)大小是多少？现在假设您想要迎合广大公众的需求(这意味着如果您创建一个游戏网站，在那里滚动的人不会有800x600屏幕...)此外，最好将包含div的主要内容保留为自动大小(以便它随屏幕大小拉伸(stretch)，假设您内部没有任何不想拉伸(stretch)的固定元素)还是固定宽度？我设计了几个网站，但我仍然不确定2012年的最佳做法是什么。 最佳答案 查看有关响应式网页设计的更多信息。它的基本概述是:您应该使用媒体查询设置您的css并调整您的样式以适应各种
我已经在网上浏览了很多有关视口(viewport)的资源(在apple.com、quirksmode.org上)，但仍然有点困惑....假设我有一个宽度为400像素的页面..现在我想针对iPad浏览优化它..如果我将元视口(viewport)设置为设备宽度(我认为对于iPad在任何方向上都是768像素)；这是否意味着我的字体大小会放大到768px？或者我的页面会缩小为768像素宽度而不是400像素？我不太清楚如果我们针对不同的场景使用视口(viewport)会产生什么效果？在任何页面上使用视口(viewport)是否有任何负面影响(如果页面宽度设置的视口(viewport)宽度)有人可
我有一个图像占据了视口(viewport)的整个高度。图像高度应跨越整个视口(viewport)高度(100%)，以便适合观看它的屏幕(已在此处完成)，并且宽度应与高度成正比。正如您在我的页面(http://lamininbeauty.co.za)中看到的那样，页面两侧有空间。我希望图像水平居中。下面是我的代码:CSS:body{margin:0px;padding:0px;overflow:hidden;}#main{margin:auto;}img.bg{/*Setrulestofillbackground*/max-height:100%;/*Setupproportionate
我目前正在开发一个Phonegap应用程序，在使用WindowsPhone8测试它时遇到以下问题(下面的左侧屏幕截图):应用程序栏没有被删除并留下一个大的空白区域。来自varioussources我了解到WP8忽略了以下元标记:所以你必须使用“ms”前置标签再次定义它:@-ms-viewport{height:device-height;width:device-width;}但这样做会扰乱应用程序的缩放。知道发生了什么事吗？这里是前后截图: 最佳答案 将其包含在Index.html中，将其包含在CSS中:@viewport{wid
请看我的HelloWorld-esqueapplication,使用Semantic-UI构建。我经常使用Semantic-UI，比起Bootstrap，我更喜欢它，但我注意到边缘处存在这个一致的问题。视口(viewport)有某种多余的边距，请注意网页底部(空白区域)和网页右侧(更多空白区域)。我一直在尝试将html/body的width/height设置为100%，但没有成功。这是一个语义UI问题，还是其他一般问题？有任何更正此CSS的建议吗？ 最佳答案 这是因为uigrid属性会由于负边距而将内容拉出其区域。尝试将其设置为0。
我正在尝试为不同的Android设备设置不同的视口(viewport)。为此，我使用了这段代码。if(window.devicePixelRatio==1){document.querySelector("meta[name=viewport]").setAttribute('content','width=device-width,initial-scale=0.51,maximum-scale=0.51,user-scalable=0,target-densityDpi=device-dpi');}elseif(window.devicePixelRatio==2){documen
我刚刚为正在构建的网站构建了带有触摸事件的轮播slider。目前正在尝试弄清楚如何在特定视口(viewport)上激活或禁用触摸事件(hammer)。基本上一旦它到达手机/平板电脑视口(viewport)。Hammer.js将启动禁用slider的单击控件varactiveSlide=0;$('.faculty-carousel').attr('data-slide','0');$('.tile-layout').on('click',function(){$('.faculty-items').each(function(){$(this).addClass('tile-view')
不守规矩的网站网址:http://chrism.se上线后我们发现，如果视口(viewport)对于内容来说太小，以至于需要滚动，背景图像(body-tag，repeat-x)不会超出初始View，但我无法为我的生活弄清楚为什么以及如何解决它。要记住的一点是，我没有自己编写网站代码，因为我不是那种精通Javascript的人，而且设计师想要一些swooshy效果。我的资深同事肯定能找到补救措施，但不幸的是他不在，我想把这个总结一下。html和css的状态与我发现该问题时相同，但我尝试了我在类似问题上看到的建议，主要围绕最小宽度。我不太明白backgroundisonlyaswideas
我在Chrome中使用设备指标替代来测试较小分辨率(在本例中为320x480)的响应式网站。在这种情况下，我的视口(viewport)元标记对页面没有任何影响。Logo会显得很小，而且我完全无法辨认。或多或少，我会说我看到的一切都是0.5比例。这是我的HTML的头部:Titleofthedocument.wrapper{min-width:960px;padding:010px;}.hovertext{background:#ccc;}这在其他人的网站上确实有效......我不知道我做错了什么...... 最佳答案 试试这个代替你的
