Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.03.2020, 07:41
Интересующийся
Отправить личное сообщение для abadon Посмотреть профиль Найти все сообщения от abadon
 
Регистрация: 25.02.2019
Сообщений: 10

Неправильные данные о размере экрана
Здравствуйте, у меня есть скрипт который создает канвас и заливает зеленый прямоугольник во весь экран но если экран больше чем 800px в ширину то прямоугольник максимум может быть 800px
Но дело в том что даже на мобильном устройстве в котором нет 800px прямоугольник все равно не на весь экран.
$(function() {
    scr_w=$(document).width()-2; // ширина
    scr_h=$(document).height()-2; // высота
    max_width=800; // максимальная ширина
    width=scr_w;
    height=scr_h;
    pleft=0; // отступ для выравнивания по центру
    if(scr_w>max_width){
        width=max_width;
        pleft= (scr_w/2)-400;
    }
    var canvas1 = $('<canvas/>', { id: 'canv', height: scr_h, width: scr_w});
    $('body').append(canvas1); // создание канваса
    
    var canvas = document.getElementById("canv");
    canvas.width=scr_w;
    canvas.height=scr_h;
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "green";
    ctx.fillRect(pleft, 0, width, 100); // рисование квадрата
});


Подскажите что я не так делаю? или браузер у меня глючит?
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2020, 07:43
Интересующийся
Отправить личное сообщение для abadon Посмотреть профиль Найти все сообщения от abadon
 
Регистрация: 25.02.2019
Сообщений: 10

если что 10 ошибок которые в консольке, это из за какого то расширения хрома скорее всего vpn так что код в порядке
Ответить с цитированием
  #3 (permalink)  
Старый 16.03.2020, 09:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,409

abadon,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  *{
      margin: 0;
      padding: 0;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var width=document.documentElement.clientWidth - 2 ; // ширина
    var height=document.documentElement.clientHeight - 4; // высота
    var max_width=800; // максимальная ширина
    var canvas1 = $('<canvas/>', { id: 'canv', attr : {height, width}});
    $('body').append(canvas1); // создание канваса
    var canvas = canvas1[0];
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "green";
    width = Math.min(max_width, width);
    var pleft = (canvas.width - width)/2;
    ctx.fillRect(pleft, 0, width, 100); // рисование квадрата
});

  </script>
</head>
<body>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 16.03.2020, 20:49
Интересующийся
Отправить личное сообщение для abadon Посмотреть профиль Найти все сообщения от abadon
 
Регистрация: 25.02.2019
Сообщений: 10

спасиба
чуть позже разберусь подробнее в ваших изменениях то я немного не догоняю как у вас координаты берутся )))
Ответить с цитированием
  #5 (permalink)  
Старый 17.03.2020, 07:24
Интересующийся
Отправить личное сообщение для abadon Посмотреть профиль Найти все сообщения от abadon
 
Регистрация: 25.02.2019
Сообщений: 10

У кого будет такая же проблема, я нашел еще выход, это вот такой доктайп.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//RU" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Ответить с цитированием
  #6 (permalink)  
Старый 19.03.2020, 07:02
Новичок на форуме
Отправить личное сообщение для lofese10 Посмотреть профиль Найти все сообщения от lofese10
 
Регистрация: 19.03.2020
Сообщений: 3

css

*
{
margin : 0;
padding : 0;
overflow : hidden;
}


js


var width = document.body.clientWidth
var height = document.body.clientHeight
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отключение скрипта при определенном размере экрана TheSanches Общие вопросы Javascript 2 25.01.2018 14:26
Как передать данные из одинаковых форм php скрипту через AJAX? griga999 AJAX и COMET 28 10.10.2016 06:09
Отобразить данные формы на другой странице Bumer Events/DOM/Window 10 02.04.2015 18:10
Передать данные через Ajax zahod5277 AJAX и COMET 1 20.01.2015 21:31
Не совсем обычный фрейм и выезжающий текст при наводе на картинку. amaz245 Элементы интерфейса 35 25.12.2010 16:29