- Javascript html desktop to mobile function js
- Serve different content for a mobile device than desktop
- Accessing camera with HTML and vanilla JavaScript (Desktop and
- How to make this script work, only in mobile devices, not desktop?
- My script only works on desktop not mobile devices.. can you tell me why? [duplicate]
- Адаптивный и мобильный дизайн с CSS3 Media Queries
- Для начала посмотрим это в действии.
- Другие примеры
- Обзор
- HTML
- HTML5.js
- CSS
- Сбрасываем HTML5 элементы в block
- Описываем основную структуру в CSS
- Шаг 1
- CSS3 Media Queries
- Подключаем Media Queries Javascript
- Подключаем CSS media queries
- Размер экрана меньше 980px (резиновый макет)
- Размер экрана меньше 650px (одноколоночный макет)
- Размер экрана меньше 480px
- Эластичные изображения
- Эластичные встраиваемые видео
- Initial Scale Meta Tag (iPhone)
- Финальное Демо
Javascript html desktop to mobile function js
Solution 1: use this plugin to detect mobile only and execute your code only for mobile http://mobiledetect.net/ Solution 2: if you want to prevent executing of js codes for desktop devices just do this : 1000px is an example; you can set your desired width; Solution 1: You will need to use touch events for mobile devices. Try something along these lines: There are multiple touch events so the example above may not be the exact event you need, here is the W3C list of touch events.
Serve different content for a mobile device than desktop
Please do not test for a device, test for a screen size.
var windowWidth = $(window).width(); var maxDeviceWidth = 768; if (windowWidth > maxDeviceWidth) < //Server the desktop version //You can get the content with Ajax or load both and hide the other >else < //Load the mobile content - either with Ajax, or hide the desktop content >
I’d suggest that you just load content with Ajax based on the screen width. Make sure you also put this in
To make sure you account for screens turning sideways.
Update: I’ve included dynamic insertion based on the innerWidth so this should be cool now, it includes a video on wide screens, and a gif on small ones.
#video-container < display: none; >#gif-container < display: block; >// Mobile first = win! @media screen and (min-width: 40em) < #video-container < display: block; >#gif-container < display: none; >>
function videoOrImage() < console.log('hit') if(window.innerWidth >800) < document.getElementById('gif-container').innerHTML = '' var container = document.getElementById('video-container') container.innerHTML = '' > else < document.getElementById('video-container').innerHTML = '' var container = document.getElementById('gif-container') container.innerHTML = ''; > > window.onresize = videoOrImage();
Html desktop to mobile function js Code Example, “html desktop to mobile function js” Code Answer · javascript detect mobile device · Browse Javascript Answers by Framework.
Accessing camera with HTML and vanilla JavaScript (Desktop and
How to make this script work, only in mobile devices, not desktop?
use this plugin to detect mobile only and execute your code only for mobile
if you want to prevent executing of js codes for desktop devices just do this :
1000px is an example; you can set your desired width;
Serve different content for a mobile device than desktop, Is there a data-src approach that I should be taking perhaps?
My script only works on desktop not mobile devices.. can you tell me why? [duplicate]
You will need to use touch events for mobile devices. Click events are registered to a mouse where as mobile devices like smartphones and tablets do not.
Try something along these lines:
$(document).on('click touchstart', function () < // code here . >
There are multiple touch events so the example above may not be the exact event you need, here is the W3C list of touch events.
It’s better to add this to your code, along with the normal click events:
var isMobile=false; if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|503i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez(40|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n102|n203|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-(3|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-5|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|51|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) isMobile = true; $("#solLink").on(isMobile ? 'touchend' : 'click', function(e) < //. >);
and similarly for other elements.
Js check mobile or desktop Code Example, function isMobileDevice() < var check = false; (function(a) Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries. Пред началом посмотрите на финальное демо, что бы увидеть, как хорошо это выглядит. Изменяйте размер браузера, что бы увидеть как структура автоматически изменяется основываясь на ширине окна. Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress, которые я сделал используя media queries: iTheme2, Funki, Minblr и Wumblr. Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Для проверки ширины используются media queries, если ширина меньше чем 980px, в этом случае макет становится резиновым, вместо фиксированной ширины. Если ширина меньше 650px, то контейнеры с контентом и боковой панелью расширяются на полный экран и становятся в одну колонку. Не будем останавливаться на подробном описании HTML. Ниже описана основная структура макета. У меня есть «pagewrap», который включает в себя «header», «content», «sidebar» и «footer». Обратите внимание, что в демо используется HTML5. Internet Explorer ниже 9-й версии не поддерживает новые элементы содержащиеся в HTML5, такие как , , , и прочие. Поэтому подключаем Javascript файл html5.js в HTML документ, который позволит IE понимать новые элементы. article , aside , details , figcaption , figure , footer , header , hgroup , menu , nav , section < Я снова не буду вдаваться в подробности. Основной контейнер «pagewrap» имеет ширину 980px. «Header» имеет фиксированную высоту 160px. Контейнер «content» шириной 600px и прижат влево. «Sidebar» шириной 280px и прижат вправо. #pagewrap < На первом шаге в демо не реализованы media queries, поэтому при изменении размера окна браузера, макет будет оставаться фиксированной ширины. Теперь начинается самое интересное – media queries. Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Вы можете включить ее, добавив Javascript файл css3-mediaqueries.js. Создаем новый CSS файл для media queries. Посмотрите мою прошлую статью, что бы увидеть как работают media queries. @media screen and (max-width: 980px) < @media screen and (max-width: 650px) < @media screen and (max-width: 480px) < Для того, чтобы сделать изображения эластичными, просто добавьте max-width:100% и height:auto . Изображения max-width:100% и height:auto работает в IE7, но не работает в IE8 (да, еще один странный баг). Для исправления нужно добавить width:auto\9 для IE8. Для видео применяем те же правила, как для изображений. По непонятным причинам max-width:100% (для видео) не работает в Safari. Нужно использовать width: 100% . По умолчанию iPhone Safari сжимает станицы, что бы вместить в экран. Следующий мета-тег говорит iPhone Safari использовать ширину устройства как ширину окна и отключить. Откроем финальное демо и поизменяем размер экрана, что бы увидеть media queries в действии. Не забудьте проверить в iPhone, iPad, Blackberry (последние версии) и Android телефонах, что бы увидеть мобильную версию.Адаптивный и мобильный дизайн с CSS3 Media Queries
Для начала посмотрим это в действии.
Другие примеры
Обзор
HTML
HTML5.js
CSS
Сбрасываем HTML5 элементы в block
display : block ;
>Описываем основную структуру в CSS
width : 980px ;
margin : 0 auto ;
>
#header <
height : 160px ;
>
#content <
width : 600px ;
float : left ;
>
#sidebar <
width : 280px ;
float : right ;
>
#footer <
clear : both ;
>Шаг 1
CSS3 Media Queries
Подключаем Media Queries Javascript
Подключаем CSS media queries
Размер экрана меньше 980px (резиновый макет)
#pagewrap <
width : 95 % ;
>
#content <
width : 60 % ;
padding : 3 % 4 % ;
>
#sidebar <
width : 30 % ;
>
#sidebar .widget <
padding : 8 % 7 % ;
margin-bottom : 10px ;
>
> Размер экрана меньше 650px (одноколоночный макет)
#header <
height : auto ;
>
#searchform <
position : absolute ;
top : 5px ;
right : 0 ;
>
#main-nav <
position : static ;
>
#site-logo <
margin : 15px 100px 5px 0 ;
position : static ;
>
#site-description <
margin : 0 0 15px ;
position : static ;
>
#content <
width : auto ;
float : none ;
margin : 20px 0 ;
>
#sidebar <
width : 100 % ;
float : none ;
margin : 0 ;
>
>Размер экрана меньше 480px
html <
-webkit-text-size-adjust : none ;
>
#main-nav a <
font-size : 90 % ;
padding : 10px 8px ;
>
>Эластичные изображения
Эластичные встраиваемые видео
Initial Scale Meta Tag (iPhone)
Финальное Демо