Viewport meta-tag für den desktop-Browser?

Mein Mandant bat mich, zu reduzieren Größe der aktuellen Webseite für desktop-Browser von 30%.

ist es ein css-oder meta-tag, es zu tun, wie die viewport-meta-tag auf einem mobilen browser?

InformationsquelleAutor Moon | 2011-01-24
  1. 2

    Kann man sich die css -screen Medien-Typ.

    Ist es:

    Soll in Erster Linie für Farbe computer-Bildschirme.

    Können Sie es auf diese Weise:

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

    Gibt es auch eine handheld media Art, vor allem:

    Soll für handheld-Geräte (in der Regel kleinen Bildschirm, begrenzte Bandbreite).

    Müssen Sie jedoch testen Sie die verschiedenen Geräte und desktops Ihrer Kunden ist die Konzentration auf, um zu bestimmen, wie mit diesen media-Typen wird die Wirkung des user experience.

    • Vielen Dank für Ihre Eingabe. Versucht es auf chrome, ie und firefox. Keiner von Ihnen arbeitete. Lege ich deine css in meine css-Datei. Muss ich etwas anderes tun?
    • Ich stecke einfach in einer Abbildung, wie es zu benutzen. Sie müssen noch hinzufügen geeigneten Stilen.
    InformationsquelleAutor Oded
  2. 13

    Hmmm... ich weiß, das ist eine alte Frage, aber es gibt einen VIEL besseren Weg zu gehen über diese: verwenden Sie die CSS - scale() Transformationsfunktion auf die <html> tag zu skalieren, ALLES drin. Überprüfen Sie heraus dieses jsFiddle: http://jsfiddle.net/mike_marcacci/6fMnH/

    Die Magie ist alles hier:

    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%;
}
    • Dies ist eigentlich die Frage beantwortet. Die anderen Antworten in Erster Linie darauf hin, dass dies möglicherweise nicht der beste Weg, um das problem zu lösen.
    InformationsquelleAutor Mike Marcacci
  3. 3

    Oden ist richtig.

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

    Sondern dass das wirklich gut funktionieren, müssen Sie ems verwenden, anstatt px überall. Das gilt auch für margin und padding sowie Breite und Höhe aller Elemente.

    Einem guten Weg, dies zu tun ist die Verwendung von SASS. Erstellen Sie einfach Ihre eigenen sass-Funktion konvertieren Sie Ihren px-Messungen in ems on-the-fly. So etwas wie dies zu tun:

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

    Welche dann benutzt wird, in der CSS etwa so:

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

    So, wenn der Körper die Schriftgröße wurde auf 100% gesetzt, dann die Schriftgröße entspricht 12px und die Breite des div-würden 200px breit.

    InformationsquelleAutor Fotherington
  4. 3

    Hier code für die proportionale Skalierung und Positionierung, wnen mit "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+'%');
    InformationsquelleAutor Alexander Simonov
  5. 0

    Aktivieren Sie den meta-viewport-tag auf desktop mit JS. Zuerst sollte man daraus die Einstellung (Breite) von der meta-tag: 

    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);
  }
}

    Dann müssen Sie ein wenig JS und die Lösung von Mike zu bekommen, diese funktionierende Lösung: http://codepen.io/anon/pen/GqoeYJ. Beachten Sie, dass dieses Beispiel wird die Breite auf 1200 Pixel, die aber initial-scale: 0.7 umgesetzt werden könnte, in der gleichen Weise.

    InformationsquelleAutor JoostS
Schreibe einen Kommentar