桌面瀏覽器的Viewport元標記？

Question

我的客戶要求我將桌面瀏覽器當前網站的大小減少30％。

有沒有像移動瀏覽器上的視口元標記那樣的css或meta標簽？

Answer 1

嗯......我知道這是一個老問題，但有更好的方法可以解決這個問題：使用<html>標簽上的CSS scale()轉換函數來擴展內部的一切。 看看這個jsFiddle： http ： //jsfiddle.net/mike_marcacci/6fMnH/

魔術就在這里：

html {
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
    width: 200%;
    height: 200%;
    margin: -50% -50%;
}

Answer 2

頌歌是對的。

@media screen {
  body { font-size: 70% }
}

但為了使其真正有效，你必須在所有地方使用ems而不是px。 這適用於邊距和填充以及所有元素的寬度和高度。

一個好方法是使用SASS。 只需創建自己的sass函數即可將px測量值轉換為ems。 這樣的事情會做：

@function em($px, $context: 16, $basesize: 16) {
  @return (($px/$basesize)/($context/16))+em;
}

然后在你的CSS中使用它，如下所示：

div { font-size:em(12); width: em(200,12); }

因此，如果正文字體大小設置為100％，則字體大小將等於12px，div的寬度將為200px寬。

Answer 3

這里使用“transform：scale”進行比例縮放和定位的代碼

CSS

html,body
{
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;    
}
html
{
    position:absolute;
}

JS

var scale = 1;
$('html').css('transform','scale('+scale+')');

var windowWidth = $(window).width();
$('body').append(windowWidth);
$('body').append(' ' + windowWidth*scale );
//$('html').width(windowWidth*scale);


var width = (100*(1/scale));
var left = -(width*(1-scale))/2;

var height = (100*(1/scale));
var top = -(height*(1-scale))/2;

$('html').css('top', top+'%');
$('html').css('left', left+'%');
$('html').width(width+'%');
$('html').height(height+'%');

Answer 4

您可以查看css screen 媒體類型。

它是：

主要用於彩色電腦屏幕。

你可以這樣使用它：

@media screen {
  body { font-size: 70% }
}

還有一種handheld媒體類型，主要是：

適用於手持設備（通常為小屏幕，帶寬有限）。

但是，您需要測試客戶端關注的不同設備和桌面，以確定使用這些媒體類型將如何影響用戶體驗。

Answer 5

您可以使用JS在桌面上啟用元視口標記。 首先，您應該從元標記派生設置（寬度）：

var viewportcontent = $( "#myviewport" ).attr('content');
var viewportcontents = viewportcontent.split(",");
//if it starts with 'width='
for (var i = 0; i < viewportcontents.length; i++) {
  if(viewportcontents[i].lastIndexOf('width=', 0) === 0) {
    var wspec = viewportcontents[i].substring(6);
  }
}

然后你需要一個小JS和Mike的解決方案來獲得這個工作解決方案： http ： //codepen.io/anon/pen/GqoeYJ 。 請注意，此示例強制寬度為1200像素，但initial-scale: 0.7可以以相同方式實現。

桌面瀏覽器的Viewport元標記？

問題描述

5 個解決方案

解決方案1
13 2013-03-11 21:39:27

解決方案2
3 2014-01-10 23:11:38

解決方案3
3 2014-09-04 06:57:41

解決方案4
2 已采納 2011-01-24 21:50:39

解決方案5
0 2016-06-12 00:16:19

桌面瀏覽器的Viewport元標記？

問題描述

5 個解決方案

解決方案1 13 2013-03-11 21:39:27

解決方案2 3 2014-01-10 23:11:38

解決方案3 3 2014-09-04 06:57:41

解決方案4 2 已采納 2011-01-24 21:50:39

解決方案5 0 2016-06-12 00:16:19

解決方案1
13 2013-03-11 21:39:27

解決方案2
3 2014-01-10 23:11:38

解決方案3
3 2014-09-04 06:57:41

解決方案4
2 已采納 2011-01-24 21:50:39

解決方案5
0 2016-06-12 00:16:19