Неправильные данные о размере экрана
Здравствуйте, у меня есть скрипт который создает канвас и заливает зеленый прямоугольник во весь экран но если экран больше чем 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); // рисование квадрата }); Подскажите что я не так делаю? или браузер у меня глючит? |
если что 10 ошибок которые в консольке, это из за какого то расширения хрома скорее всего vpn так что код в порядке
|
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> |
спасиба :dance:
чуть позже разберусь подробнее в ваших изменениях :blink: то я немного не догоняю как у вас координаты берутся :lol: ))) |
У кого будет такая же проблема, я нашел еще выход, это вот такой доктайп.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//RU" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> |
css
* { margin : 0; padding : 0; overflow : hidden; } js var width = document.body.clientWidth var height = document.body.clientHeight |
Часовой пояс GMT +3, время: 02:17. |