Можете ли вы сделать Условное заявление, чтобы использовать или не использовать некоторый JavaScript в зависимости от размера области просмотра?

Question

Интересно, может ли кто-нибудь решить эту HTML, CSS, Javascript головоломку?

Я использую @ media viewport CSS декларацию для обнаружения экрана мобильного телефонаразмеры, которые уменьшают мой веб-сайт для мобильных посетителей , просто используя CSS, что приятно, поскольку у меня есть только 1 веб-сайт для обновления, а не 2. Пока все хорошо ...:)

Однако в моем HTML есть строка кода, ссылающаяся на файл Javascrit, который делает этот действительно приятный «плавная прокрутка» эффектом основных навигационных ссылок (например).

Все это прекрасно работает на нормальной версии сайта, но по неизвестной причине останавливает навигацию, полностью работающую на минимизированной версии сайт.Если я удалю эту ссылку в файле js / softscroll.js , то ссылки на минимизированном сайте будут работать нормально, и я согласен с потерей этого эффекта на мини-версии, но потом ... основнойнавигация сайтов прекращается!: <У меня должен быть этот эффект для основного сайта. </p>

Итак, мой вопрос ...

... Есть ли способ сделать некоторыевид условного выражения в HTML или JavaScript (JS я представляю!), который скажет браузеру использовать только этот JavaScript (js / softscroll.js) ... ЕСЛИ ... посетитель ТОЛЬКОпросмотр обычного сайта и ... очевидно, игнорировать файл js / softscroll.js ЕСЛИ доступ к мобильной версии сайта?

Вау!Надеюсь, ты понимаешь, о чем я, черт возьми, говорю !?Ха!Вам, наверное, интересно, чего я пытаюсь достичь здесь, или почему я так увлечен этим эффектом JavaScript?Длинная история, но давайте просто скажем, что я делаю один из тех сумасшедших сайтов прокрутки стороны, и это жизненно важно!: 0)

Так что?любая помощь приветствуется!Спасибо за ваше время!

Answer 1

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

http://api.jquery.com/jQuery.getScript/

if(mainsite) $.getScript('js/softscroll.js');

UPDATE

Во-первых, когда вам нужен Javascript, вам действительно нужен jQuery. Лучше всего скачать его и разместить на своем сайте - http://jquery.org

Но вот способ, который мог бы работать сейчас:

в разделе заголовка вашего приложения:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

Далее вам нужен способ узнать, доступен ли ваш сайт с мобильного устройства или нет:

<script>
    var platform = navigator.platform.toLowerCase();
    var mobile = platform.match(/(iphone|ipod|ipad|android)/);

Затем вам нужно условно загрузить свой специальный скрипт:

    if(!mobile) $.getScript('js/softscroll.js');
</script>

Эти шесть строк кода, добавленные в раздел заголовка вашего сайта, вероятно, подойдут:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
    var platform = navigator.platform.toLowerCase();
    var mobile = platform.match(/(iphone|ipod|ipad|android)/);
    if(!mobile) $.getScript('js/softscroll.js');
</script>

Answer 2

вы можете использовать mediaqueries.js http://code.google.com/p/css3-mediaqueries-js/ я предпочитаю adapt.js https://github.com/nathansmith/adapt

Answer 3

Как правильно указал Мэтт H (+1), вы можете условно загрузить скрипт, используя JS.

Также вы можете увидеть статью, которая имеет дело с размером области просмотра здесь .