13

クライアントから、デスクトップ ブラウザ用の現在の Web サイトのサイズを 30% 縮小するように依頼されています。

モバイル ブラウザのビューポート メタ タグのようにそれを行う css またはメタ タグはありますか?

4

5 に答える 5

13

うーん...私はこれが古い質問であることを知っていますが、これについてもっと良い方法があります:タグでCSSscale()変換機能を使用して、<html>内部のすべてをスケーリングします。この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%;
}
于 2013-03-11T21:39:27.490 に答える
3

css screen media typeを見ることができます。

それは：

主にカラー コンピュータ画面を対象としています。

次のように使用できます。

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

またhandheld、主に次のようなメディア タイプもあります。

ハンドヘルド デバイス (通常は画面が小さく、帯域幅が限られている) を対象としています。

ただし、クライアントが注目しているさまざまなデバイスとデスクトップをテストして、これらのメディア タイプの使用がユーザー エクスペリエンスにどのように影響するかを判断する必要があります。

于 2011-01-24T21:50:39.537 に答える
3

オデス そうです。

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

しかし、これをうまく機能させるには、あらゆる場所で px の代わりに ems を使用する必要があります。これは、すべての要素の幅と高さだけでなく、マージンとパディングにも当てはまります。

これを行う良い方法は、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% に設定されている場合、フォント サイズは 12 ピクセルに相当し、div の幅は 200 ピクセルになります。

于 2014-01-10T23:11:38.783 に答える
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+'%');
于 2014-09-04T06:57:41.180 に答える