Метатег Viewport для настольных браузеров?

мой клиент просит меня уменьшить размер текущего веб-сайта для настольных браузерах на 30%.

есть ли css или мета-тег, чтобы сделать это как viewport meta tag в мобильном браузере?

9
browser viewport

5 ответов

вы можете посмотреть на CSS screen тип носителей.

- Это:

предназначено главным образом для экранов компьютера цвета.

вы можете использовать это так:

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

также handheld тип носителя, в первую очередь:

предназначен для портативных устройств (обычно небольшой экран, ограниченная пропускная способность).

однако вам нужно будет протестировать различные устройства и настольные компьютеры ваш клиент фокусируется на том, чтобы определить, как использование этих типов носителей повлияет на пользовательский интерфейс.

2

Хммм... Я знаю, что это старый вопрос, но есть гораздо лучший способ сделать это: использовать CSS scale() функция преобразования на <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%;
}
13

ОД прав.

@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 в ширину.

3

здесь код для пропорционального масштаба и позиционирования, wnen с использованием "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+'%');
3

вы можете включить тег meta viewport на рабочем столе с помощью 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 и решение Майка, чтобы получить это рабочее решение:http://codepen.io/anon/pen/GqoeYJ. Обратите внимание, что этот пример заставляет ширину быть 1200 пикселей, но initial-scale: 0.7 может быть реализовано таким же образом.

0