Просмотр размера порта в зависимости от выбора пользователя

В основном у меня есть угловой проект, основанный на загрузке 3 для изменения размеров медиа-запросов.Просмотр размера порта в зависимости от выбора пользователя

То, что я намереваюсь сделать, это разрешить пользователю изменять режим рабочего стола (полная ширина экрана ноутбука) или мобильный режим (ширина носителя < 667px).

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

Примечание: Я не ожидаю изменения какой-либо части существующего CSS.

Мое мнение о том, как реализовать это.

<html ng-viewport="deviceWidth"> 
    <button ng-click="changeDeviceWidth()"> 
</html> 

// initial 
$scope.deviceWidth = getDeviceWidthFunction(); 
$scope.changeDeviceWidth = function (deviceWidth) { 
    $scope.deviceWidth = deviceWidth; 
}

источник

2016-10-01 stackdisplay

Первый: Дайте идентификатор, чтобы вы вьюпорт мета

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">

Второе: Создание кнопок выбора

<div id="selecter"> 
    <button onclick="toDesktop()"> Desktop</button> 
    <button onclick="toTablet()"> Tablet</button> 
    <button onclick="toMobile()"> Mobile</button> 
    </div>

Третье: Добавить IFRAME в качестве программы просмотра содержимого

  <iframe id="mycontent" src="http://www.majali.net"></iframe>

Четвертое: Добавить функции JS для выбора t, ширина и высота содержимого

  <script> 
      function toDesktop() { 
       document.getElementById("viewport").setAttribute("content", "width=1200"); 
       document.getElementById("mycontent").style.width='100%'; 
       document.getElementById("mycontent").style.height='600px';     
      } 

      function toMobile() { 
       document.getElementById("viewport").setAttribute("content", "width=340"); 
       document.getElementById("mycontent").style.width='320px'; 
       document.getElementById("mycontent").style.height='480px'; 
      }  

      function toTablet() { 
       document.getElementById("viewport").setAttribute("content", "width=767"); 
       document.getElementById("mycontent").style.width='767px'; 
       document.getElementById("mycontent").style.height='600px'; 
      }       
     </script>

источник

2016-10-02 07:47:34 majali

Просмотр размера порта в зависимости от выбора пользователя

ответ

Смежные вопросы