Вимкніть масштабування на мобільному Інтернеті

Я хочу відключити Pinch and Zoom на мобільних пристроях.

Яку конфігурацію слід додати до області перегляду?

Посилання: http://play.mink7.com/n/dawn/

EDIT: Оскільки це постійно коментується, ми всі знаємо, що не повинні цього робити. Питання полягав у тому, як мені це робити, а не я повинен це робити.

Додайте це у свій для мобільних пристроїв. Тоді зробіть свою ширину у відсотках, і у вас все буде добре:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Додайте це для пристроїв, які теж не можуть використовувати область перегляду:

<meta name="HandheldFriendly" content="true" />

це запобіжить будь-які дії користувача масштабування в сафарі ios, а також запобіжить функцію "збільшення до вкладок":

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

jsfiddle: https://jsfiddle.net/vo0aqj4y/11/

Це все, що мені потрібно:

<meta name="viewport" content="user-scalable=no"/>

Кожному, хто сказав, що це погана ідея, я хочу сказати, що це не завжди погана ідея. Іноді буває дуже нудно зменшувати масштаб, щоб переглянути весь вміст. Наприклад, коли ви вводите ввід на iOS, він масштабується, щоб отримати його в центрі екрана. Після цього потрібно зменшити масштаб, оскільки закриття клавіатури не спрацьовує. Також я згоден з тим, що коли ви витрачаєте багато годин на створення чудового макета та зручності користування, ви не хочете, щоб це було зіпсовано збільшенням.

Але інший аргумент також цінний для людей із проблемами зору. Однак, на мою думку, якщо у вас є проблеми з очима, ви вже використовуєте функції масштабування системи, тому немає потреби турбувати вміст.

На жаль, запропоноване рішення не працює в Safari 10+, оскільки Apple вирішила ігнорувати user-scalable=no. Цей потік містить більше деталей та деякі хакі JS: вимкнути масштабування області перегляду сафарі iOS 10+?

IE має свій власний спосіб: властивість css, -ms-content-zooming. Якщо для нього не встановлено значення нічого на тілі або щось інше, це повинно відключити його.

Вимкніть pinch для збільшення IE10

http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx

Знайдено тут ви можете використовувати user-scalable=no:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Я думаю, що саме ви можете шукати - це сенсорна дія властивості CSS . Вам просто потрібно правило CSS, як це:

html, body {touch-action: none;}

Ви побачите, що він має досить хорошу підтримку ( https://caniuse.com/#feat=mdn-css_properties_touch-action_none ), включаючи Safari, а також назад до IE10.

Спробуйте з властивістю min-width. Дозвольте пояснити. Припустимо, пристрій із шириною екрана 400 пікселів (наприклад). Під час збільшення масштабу шрифти стають все більшими та більшими. Але ящики та div залишаються з однаковою шириною. Якщо ви використовуєте мінімальну ширину, ви можете уникнути зменшення вашого div та box.

Не впевнений, що це може допомогти, але я вирішив проблему стискання / масштабування (я хотів, щоб користувачі не проводили масштабування мого веб-додатка), використовуючи модуль кутового молотка:

У своєму app.component.html я додав:

<div id="app" (pinchin)="pinchin();">

і в моєму app.component.ts:

  pinchin() {
      //console.log('pinch in');
  }