мащабиране проблем на адаптивно оформление на мобилни браузъри

• CSS
• HTML
• адаптивен дизайн
• Изгледът

Вероятно всеки, който се занимава с адаптивно оформление (и не само адаптивни), знайте, че на сайта се показва на мобилната версия на браузъра си (например от размера на ширината на екрана на 480 пиксела), сайтът не се появи в мащаб 1: 1, а "изцедени" размера на прозореца на браузъра. Т.е. Browser намалява сайта на такъв размер, че тя ще се побере изцяло в прозореца на браузъра. елементи на сайта стават по-малки, шрифтовете не са четливи. И потребителят трябва да се увеличи (скала) го ръчно. Но аз не приемам такава ситуация. Аз тогава адаптивно оформление с надеждата, че тя ще бъде показана в браузъра в реалния му размер и не се свива поради мащаба на страницата на размера на прозореца и то се дължи на гумената блок. Външно устройство () сайт има максимална ширина от 900 пиксела, с възможност за свиване 320. Блокове пресова в същото, пренаредени и т.н. - това няма значение, защото не става въпрос за това. Така че компресията на прозореца на браузъра на компютъра, с размера на прозореца е по-малко от 900 пиксела, сайтът започва успешно да се свие поради предвидения размер в CSS като процент от медийни заявки и т.н. ... И когато го отворите на мобилно устройство, то остава в реалния му размер и пропорции, но просто мащабирани до такава степен, че да се побере в прозореца на браузъра.

За пореден път, проблемът не е нещо ново, а може би много Imposer запознат и мога да дъвче, така напразно, но само в случай, се опитах да опиша в детайли.

И Хабре е споменато решение на този проблем, както и Google не е трудно. Ние използваме мета тагове изгледа

която казва на браузъра, че сайтът трябва да се покаже, какъвто е, не да мащабирате автоматично по време на първоначалното стартиране (след това пръстите, разбира се, могат да бъдат мащабирани, ако не и да го спре в една и съща мета-таг). И ако, например, не е адаптивен уеб сайт и ширината му е по-голяма от ширината на прозореца на браузъра, ще, разбира се, не се вписва изцяло, потребителят или ще трябва да се намали (мащаб ръчно) или превъртате. И ако това е адаптивен уебсайт, то е, както е бил замислен програмист, ще се свие в резултат на гумения блок на ширината на прозореца. Какво в крайна сметка се случи с моя сайт.

Какво в крайна сметка се е случило. Сайт, максималната ширина на което, аз ви напомня на 900 пиксела са показани в нормалния му размер на 100% мащаб. Но размерът на екрана на устройството 1280 пиксела! И в крайна сметка poluchlos? И това се е случило, че сайтът не е заета цялата ширина на екрана, и взе техните законни 900 пиксела. В резултат на това краищата на областта остават приблизително 154 пиксела ((1280-900) / 2). Някой може да каже, че той w глоба. В крайна сметка, когато се отвори сайта на вашия компютър, като ширината на екрана, например, същите 1280 пиксела, е естествено да сайтът няма да заема цялата ширина и ще заемат позицията, че 900 пиксела, които са дефинирани в CSS като максималната ширина на сайта (или с фиксирана ширина, ако фиксирано оформление).

Но на таблет след тази ситуация не изглежда нормално. защото Самият екран е все още малък в сравнение с настолните компютри, въпреки че е имал разрешение или 1280 точки. Бих искал да видя сайта отнема не повече от място на екрана. На компютъра, ние не се нуждаем, защото 900 пиксела на екрана ще изглежда нормално, добро пиксел размер го повече от таблета. Но на таблета, когато страницата не заема целия екран - изглежда, необузданост (поне за мен). И това нещо е прозореца за мета тагове. ние изберете да показвате на сайта в реално. Това ни помогна, когато размерът на сайта е по-малко от 900 пункта, т.е. Това ни помогна да не го мащаб до размера на екрана и се показва в реален размер. Но тя ни държи в размера на екрана повече от 900 точки, защото там просто искам да я увеличите до работа, до мястото увеличи за да се поберат на прозореца, т.е. се възползват максимално от цялата ширина на екрана, това е добре в края на краищата на мобилното устройство.

Аз трябва да се сравни с заредите версия на сайта на стария (дизайн напълно еднакви, с изключение на това, че не е адаптивна и фиксирана ширина от 900 пиксела) и е в първоначалното натоварване върху цялата ширина на екрана. В крайна сметка, в нея не съм използвал илюминатора.

В заключение ще кажа, че досега тестван само на Samsung. Страхува се да се предположи какво ще се случи на Ipad, което е резолюцията на широката страна два пъти Samsung 2048 пиксела. Е страницата, ще отнеме по-малко от половината от екрана (тя е там 900 точки)?

С една дума, бих искал да попитам общността, за да попаднете на някой с подобни проблеми. И дали тя може да се разглежда като проблем? Или това е нормално поведение, което не е необходимо да се коригира? Т.е. Тя показва на сайта в реално. Ако не изпълва екрана, без проблемите на клиента ще се увеличат вече си пръсти smasshtabiruet грешни?

Аз се опитвам да намеря начин да се направи така, че когато размерът на екрана е по-малка от 900 пиксела, илюминатора ще работи и в размер на повече от 900 пиксела няма да стреля. Аз не намерих.

Послепис Аз съжалявам, че не се поставя в този текст QA, че пропуснах този път, и сега не мога да променя.

Ако съм правилно разбрана, тогава имате съдържанието, минимална ширина на 320 и най-много - да 900px. И трябва да:
1. Ако размерът на екрана на устройството си, е по-малък от 900px, а след това задайте ширина прозоречните изгледи страници, като на екрана на устройството си (тоест е възстановен CSS маркиране по тази ширина).
2. Ако размерът на екрана на устройството е по-голямо или равно на 900px, а след това определете ширината на страницата в вмъкнат изглед 900px (900px в това от размера на екраните и повече съдържание се увеличава поради скала).

Благодаря ви за вашето решение! Не съм пробвал, но ще се опитам скоро!

Не е работа за мен. document.write нито една от които не могат да направят на мета маркер. проверяват други записи пише.

Името на устройството, на която версия проверка код, версията на операционната система, браузър и браузър.

1. Проверете правото на оформление, при спазване на медийни заявки, шрифт мащаб, и т.н. веднага в браузъра Какво тест мобилен vorstku?
2. Пишете на медийни заявки в правилния ред с точните стойности, подходящи условия.