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

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

9 голосов
/ 25 января 2011

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

Существует ли метка-тег css или метка, чтобы сделать его похожим на метатег viewport в мобильном браузере?

Ответы [ 5 ]

13 голосов
/ 12 марта 2013

Хммм ... Я знаю, что это старый вопрос, но есть НАМНОГО лучший способ сделать это: использовать функцию преобразования 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%;
}
3 голосов
/ 04 сентября 2014

Здесь код для пропорциональной шкалы и позиционирования, когда используется «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 голосов
/ 11 января 2014

Одес прав. 

@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%, то размер шрифта был бы равен 12 пикселей, а ширина div составляла бы 200 пикселей в ширину.

2 голосов
/ 25 января 2011

Вы можете посмотреть на css screen тип носителя .

Это:

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

Вы можете использовать его следующим образом: 

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

Существует также handheld тип носителя, в основном:

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

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

0 голосов
/ 12 июня 2016

Вы можете включить мета-тег 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 может быть реализован таким же образом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...