"Mətn" daxil etikatının avtomatik zərifliyini söndürün - Safari iPhone

type="text" ilə <input> olan HTML səhifəni yaratdım. İPhone üzərindəki Safari-i istifadə edərək, bu səhifəni tıkladığımda səhifə daha böyük olur (avtomatik ölçülməsi). Hər kəs bunu necə dayandırdığını bilirmi?

386
07 июня '10 в 15:06 2010-06-07 15:06 Eduardo Montenegro, 07 İyun tarixində saat 15: 06-da başlayacaq. 2010-06-07 15:06
@ 29 cavab

Şriftin ölçüsü 16 16 16px az olsa və form elementləri üçün şrift ölçüsü 11 11 11px (ən azı Chrome və Safari) isə brauzer artacaq.

Bundan əlavə, select elementdə bir əlavə focus plagiət sinfi olmalıdır.

 input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select:focus, textarea { font-size: 16px; } 

Yuxarıdakıların hamısını istifadə etmək lazım deyil, sadəcə lazım olan elementləri, məsələn, yalnız text , numbertextarea çəkə bilərsiniz:

 input[type='text'], input[type='number'], textarea { font-size: 16px; } 

Ana üslubdan giriş giriş elementlərinə alternativ həll:

 body { font-size: 16px; } input[type="text"] { font-size: inherit; } 
374
18 июня '11 в 10:17 2011-06-18 10:17 cavab 18 iyun 2011-ci ildə saat 10: 17-də verilir. 2011-06-18 10:17
 @media screen and (-webkit-min-device-pixel-ratio:0) { select:focus, textarea:focus, input:focus { font-size: 16px; background: #eee; } } 

Yeni: Odaklanmadan girişdə 16px istifadə etmirsinizsə, IOS hələ də ölçəcəkdir.

border=0
 @media screen and (-webkit-min-device-pixel-ratio:0) { select, textarea, input { font-size: 16px; } } 

IOS seçilməsi üçün bir fon əlavə etmədiyi üçün bir fon əlavə etdim.

198
27 апр. Cavab 27 aprel tarixində Christina tərəfindən verilmişdir 2013-04-27 21:44 '13 saat 21:44 'da 2013-04-27 21:44

Siteniz düzgün bir mobil cihaz üçün nəzərdə tutulmuşsa, miqyaslamaya imkan verməyinizə qərar verə bilərsiniz.

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

Bu, mobil səhifənizin və formanızın "float" olacaq problemi həll edir.

157
04 дек. Cavab Marcellino Bommezijn 04 Dekabr. 2012-12-04 18:21 '12 saat 06:21 'da 2012-12-04 18:21

Zənginləşdirmə qabiliyyətini söndürmədən, istifadəçi məlumat daxil edərkən Safari-nin avtomatik olaraq mətn sahələrini genişləndirməsini maneə törədir. Yalnız maximum-scale=1 lakin digər cavablarda təklif olunan xüsusi ölçülü atributu göstərməyin.

Bu zooms olan "floats" bir qat bir forma varsa, bu, faydalı istifadəçi interfeysi elementləri ekran off hərəkət etmək üçün səbəb ola bilər.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

75
16 сент. cavab daxmacrog 16 sep verilir . 2017-09-16 16:59 '17 saat 16:59 'da 2017-09-16 16:59

Nəticədə, cavab: forma elementlərinin şrift ölçüsünü ən azı 16 pikselə bərabərləşdirin

59
05 окт. Cavab Nik 05 oktyabr verilir . 2011-10-05 02:56 '11 'də 2:56' də 2011-10-05 02:56
 input[type='text'],textarea {font-size:1em;} 
34
24 сент. Cavab stormsweeper 24 sep tərəfindən verilir . 2010-09-24 01:01 '10 at 1:01 2010-09-24 01:01

Bu problemi həll etmək üçün doğru yol meta görünüşünü dəyişməkdir:

21
04 дек. Cavab Milos Matic tərəfindən verilir 04 Dekabr. 2015-12-04 12:58 '15 'də saat 12:58 ' da

Mənim tapa bilməyim təmiz yol yoxdur, amma burada bir hack var ...

1) Mouseover hadisəsinin miqyasdan əvvəl baş verdiyini anladım, ancaq mousedown və ya diqqət mərkəzində əvvəl miqyaslama baş verir.

2) javascript istifadə edərək, görünüş META etiketini dinamik olaraq dəyişə bilərsiniz ( Javascript istifadə edərək, iPhone Safari ölçüsünü aktivləşdir / qoşmaq bax) ?

Beləliklə, bu cəhd edin (kompaktlıq üçün jquery ilə göstərilir):

 $("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable); function zoomDisable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="user-scalable=0" />'); } function zoomEnable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="user-scalable=1" />'); } 

Bu, mütləq bir hack ... Mouseover / aşağı həmişə qeydlər / çıxışları tutmadığı vəziyyətlər ola bilər, amma testlərimdə yaxşı işləmiş və etibarlı bir başlanğıcdır.

14
04 марта '11 в 19:50 2011-03-04 19:50 Cavab 04 mart 2011-ci il saat 19: 00 -da verilir

Görünüş metafilesinə əlavə olaraq istifadəçi ölçeklenebilir = 0 əlavə edin

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

Mənim üçün çalışdı :)

13
11 окт. 11 oktyabrda Tuyen Cao'nun cavabı verildi. 2016-10-11 18:19 '16 at 18:19 2016-10-11 18:19

Bu yaxınlarda (bu gün D) bu davranışı inteqrasiya etmək məcburiyyətindəyəm. Tarazlar da daxil olmaqla, orijinal dizayn sahələrini təsir etməmək üçün, çevrilmənin sahə mərkəzinə tətbiq edilməsinə qərar verdim:

 input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { font-size: 16px; } 
13
18 дек. Cavab piouPiouM tərəfindən verilir 18 dekabr. 2012-12-18 16:24 '12 at 4:24 pm 2012-12-18 16:24

Mən yuxarıda Christina həllini istifadə etdim, amma masa üstü kompüterlərə müraciət etmək üçün önyükleme qaynağı və başqa qayda üçün yüngül dəyişiklik. Varsayılan Bootstrap font ölçüsü 14 pikseldir ki, bu da artmağa səbəb olur. Aşağıda, Bootstrap-də "forma nəzarətləri" üçün 16px-ə dəyişir və artımın qarşısını alır.

 @media screen and (-webkit-min-device-pixel-ratio:0) { .form-control { font-size: 16px; } } 

Dəyişən brauzerlər üçün 14px-ə geri qayıt.

 @media (min-width: 768px) { .form-control { font-size: 14px; } } 

Mən istifadə etməyə çalışdım. Form-kontrol: focus, 14px-dən ayrılmış, istisna olmaqla, 16 pikselə dəyişdirmişdir və iOS8 ilə miqyaslama problemini düzəldməmişdir. Ən azı, iOS8-dən istifadə edərək iPhone-da, şriftin ölçüsü 16 piksel olmalıdır, belə ki, səhifəni böyütməyin.

7
27 сент. Tanny O'Haley tərəfindən verilmiş cavab 27 sentyabr 2014-09-27 02:04 '14 at 2:04 2014-09-27 02:04

İOS 7-də işləyən Javascript hack. Bu @ dlo cavabına əsaslanır, lakin mouseover və mouseout hadisələri touchstart və touchborn hadisələri ilə əvəz olunur. Əsasən, bu skanlama miqyaslamanın qarşısını almaq üçün yenidən ölçülmə effektivləşdirilməzdən əvvəl yarım zamanaşımı əlavə edir.

 $("input[type=text], textarea").on({ 'touchstart' : function() { zoomDisable(); }}); $("input[type=text], textarea").on({ 'touchend' : function() { setTimeout(zoomEnable, 500); }}); function zoomDisable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />'); } function zoomEnable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />'); } 
7
05 нояб. Cavab İlkka R. 05 noyabr. 2013-11-05 12:21 '13 at 12:21 2013-11-05 12:21

Mənim üçün çalışdı:

 input, textarea { font-size: initial; } 
6
02 сент. Cavab user1000952 tərəfindən 02 Sep. 2014-09-02 04:00 '14 saat 04:00 'da 2014-09-02 04:00 ' də

Bunu jQuery ilə də etdik:

 $('input[type=search]').on('focus', function(){ // replace CSS font-size with 16px to disable auto zoom on iOS $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px'); }).on('blur', function(){ // put back the CSS font-size $(this).css('font-size', $(this).data('fontSize')); }); 

Əlbəttə ki, bu 16px font 16px dizaynı pozarsa bəzi digər interfeys elementləri uyğunlaşdırıla bilər.

6
17 дек. Cavab 17 dekabrda Nicolas Hoizey tərəfindən verilir . 2012-12-17 19:31 '12 saat 07:31 'da 2012-12-17 19:31

Bir müddət sonra bu həlli ilə gəldim.

4
05 янв. Cavab verilir jirikuchta 05 Yanvar 2017-01-05 17:34 '17 də 5:34 'da 2017-01-05 17:34

Yeri gəlmişkən, Bootstrap istifadə edirsinizsə, sadəcə bu seçimi istifadə edə bilərsiniz:

 .form-control { font-size: 16px; } 
3
01 дек. Cavab Bohdan Vorona 01 dekabr. 2017-12-01 12:40 '17 saat 12:40 'də 2017-12-01 12:40

Buradakı demək olar ki hər bir xətt oxumaq və müxtəlif həllər test etdikdən sonra, iPhone 7 iOS 10.x-də icad etdiyim, sınaqdan keçirdiyim və mənim üçün çalışdığım həlləri paylaşan hər kəsə təşəkkür edirəm:

 @media screen and (-webkit-min-device-pixel-ratio:0) { input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="text"]:hover, input[type="tel"]:hover, input[type="url"]:hover, input[type="password"]:hover, textarea:hover, select:hover{font-size: initial;} } @media (min-width: 768px) { input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="text"]:hover, input[type="tel"]:hover, input[type="url"]:hover, input[type="password"]:hover, textarea:hover, select:hover{font-size: inherit;} } 

Bununla yanaşı, "asmaq" və "diqqət" dövlətləri arasında baş verən şrift ölçüsündə sürətli dəyişiklik nəticəsində, həmçinin, performansa yenidən baxmağın təsiri nəticəsində nəzərəçarpacaq dərəcədə "sıçrayış" yaranır

3
09 февр. Cavab l3bel verildi 09 fevral. 2017-02-09 17:54 '17 at 17:54 2017-02-09 17:54

Görürəm ki, burada insanlar javascript və ya göz funksiyası ilə bəzi qəribə şeylər edir və cihazlarda bütün əl ölçeklendirmelerini aradan qaldırır. Mənim fikrimcə, bu həll olmamalıdır. Bu CSS dilimini əlavə etmək, font ölçüsünü 16px kimi sabit bir rəqəmə dəyişmədən iOS-un avtomatik ölçülməsini aradan qaldıracaq.

Mənim cari olaraq, giriş sahələrində 93.8% (15px) yazı tipi ölçüsünü istifadə edirəm və mənim CSS fraqmentini əlavə edərək bu rəqəm 93.8% -dir. 16px dəyərinin dəyişdirilməsinə və ya onu sabitləşdirməyə ehtiyac yoxdur.

 input[type="text"]:focus, textarea:focus { -webkit-text-size-adjust: 100%; } 
2
14 апр. Jack Ottermans tərəfindən verilən cavabı Apr 14 2015-04-14 03:39 '15 at 3:39 2015-04-14 03:39

Şriftin ölçüsünü (giriş sahələri üçün) bədən font ölçüsünə bərabərləşdirmək brauzerin gözdən keçirilməsinə imkan vermir. font-size: 1rem istifadə etmək istərdim font-size: 1rem daha zərif bir həll kimi.

2
26 апр. Sindiploma cavab 26 aprel 2015-04-26 14:05 '15 at 2:05 pm 2015-04-26 14:05

Stephen Walsh'ın Cavabına əsasən ... Bu kod, hiyləgər girişlərinin şrift ölçüsünü dəyişdirmədən işləyir (çılpaq görünür), hətta hələ də FastClick ilə işləyir və mən "ani" gətirmək üçün bütün mobil saytlara əlavə olunmasını təklif edirəm. İhtiyaçlarınıza uyğun olaraq "görünüşün genişliyi" ni seçin.

 // disable autozoom when input is focused var $viewportMeta = $('head > meta[name="viewport"]'); $('input, select, textarea').bind('touchend', function(event) { $viewportMeta.attr('content', 'width=640, user-scalable=0'); setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1) }); 
1
27 июня '14 в 18:15 2014-06-27 18:15 cavab 27 iyun 'da 18:15' də qayaya qoyulacaq 2014-06-27 18:15

Şriftin ölçüsünü 16 pikselə təyin etmək üçün üst cavab üçün şərh bu fontu artırmaq / azaltmaq istəyirsinizsə, bu qərarın necə ediləcəyini soruşdu.

Mən sizə hər şeyi bilməyəcəyəm, amma font ölçüləri üçün px istifadə etmənin ən yaxşı yolu deyil, em istifadə etməlisiniz.

Bu problemi mənim mətn sahəsində 16 pikseldən çox olduğu cavab verən veb saytımda qaçdım. 2rem'e bərabər bir formalı konteynerim vardı və mənim giriş saham 1.4em idi. Mobil sorgularımda, görünüm portuna bağlı olaraq html yazı tipi boyutunu değiştirirəm. Standart html 10 olduğundan, mənim giriş sahəsi masaüstünde 28px hesablayır

Avtosiqarmanın aradan qaldırılması üçün girişimi 1.6-ə dəyişmək məcburiyyətindəyəm. Bu mənim şriftin ölçüsünü 32 pikselə artırdı. Bir az daha yüksək və az fərqli. Mənim iPhone 4 və 5-də mənim html font ölçüsünü bir portret üçün 15 pikselə və mənzərə üçün 10 pikselə dəyişirəm. Bu piksel ölçüsü üçün şirin yer 48 piksel idi, buna görə 1,4em (42px) ilə 1,6em (48 px) arasında dəyişdi.

Nə etməliyəm ki, şrift ölçüsündə şirin bir yer tapın və sonra geri / em ölçüsünə köçürün.

1
26 мая '16 в 20:41 2016-05-26 20:41 Cavab Jon Tinsman tərəfindən 26 May 'da 20:41 2016-05-26 20:41' də verilir

Mənim layihələrimdən birində istifadə etdiyimiz hack:

 select { font-size: 2.6rem; // 1rem = 10px ... transform-origin: ... ...; transform: scale(0.5) ...; } 

Mən istədiyim orijinal üslub və tərəzi ilə başa çatdı, amma diqqətini artırmadı.

1
01 авг. Cavab verilir magom001 01 aug. 2018-08-01 18:23 '18 at 6:23 PM 2018-08-01 18:23

Avtomatik ölçmə (kiçildilmədən) hələ də iPhone-da şərh olunduğundan JavaScript burada fokus / blur ilə işləyən dlo bəndinə əsasən istifadə olunur.

Mətn daxil edildikdən və giriş qalsa yenidən aktivləşdirildikdən sonra miqyaslama işə salınır.

Qeyd . Bəzi istifadəçilər düzəliş mətnini kiçik bir mətn daxilində redaktə edə bilməzlər! Buna görə də, şəxsən mən redaktə edərkən daxil mətnin ölçüsünü dəyişdirməyi üstün tuturam (aşağıdakı kodu baxın).

 <script type="text/javascript"> <!-- function attachEvent(element, evtId, handler) { if (element.addEventListener) { element.addEventListener(evtId, handler, false); } else if (element.attachEvent) { var ieEvtId = "on"+evtId; element.attachEvent(ieEvtId, handler); } else { var legEvtId = "on"+evtId; element[legEvtId] = handler; } } function onBeforeZoom(evt) { var viewportmeta = document.querySelector('meta[name="viewport"]'); if (viewportmeta) { viewportmeta.content = "user-scalable=0"; } } function onAfterZoom(evt) { var viewportmeta = document.querySelector('meta[name="viewport"]'); if (viewportmeta) { viewportmeta.content = "width=device-width, user-scalable=1"; } } function disableZoom() { // Search all relevant input elements and attach zoom-events var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++) { attachEvent(inputs[i], "focus", onBeforeZoom); attachEvent(inputs[i], "blur", onAfterZoom); } } if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { attachEvent(window, "load", disableZoom); } // --> </script> 

Aşağıdakı kod giriş metninin ölçüsünü 16 pikselə (hesablanmış, yəni, mövcud ölçekleme ölçüsündə) dəyişəcək, element odaklandığı zaman. Buna görə də, iPhone avtomatik olaraq zoomlaşmayacaq.

Qeyd Ölçəkləndirici faktor pəncərə.innerWidth pəncərə və 320 piksellik həlli ilə iPhone əsasında hesablanır. Bu portret rejimi yalnız iPhone üçün olacaq.

 <script type="text/javascript"> <!-- function attachEvent(element, evtId, handler) { if (element.addEventListener) { element.addEventListener(evtId, handler, false); } else if (element.attachEvent) { var ieEvtId = "on"+evtId; element.attachEvent(ieEvtId, handler); } else { var legEvtId = "on"+evtId; element[legEvtId] = handler; } } function getSender(evt, local) { if (!evt) { evt = window.event; } var sender; if (evt.srcElement) { sender = evt.srcElement; } else { sender = local; } return sender; } function onBeforeZoom(evt) { var zoom = 320 / window.innerWidth; var element = getSender(evt); element.style.fontSize = Math.ceil(16 / zoom) + "px"; } function onAfterZoom(evt) { var element = getSender(evt); element.style.fontSize = ""; } function disableZoom() { // Search all relevant input elements and attach zoom-events var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++) { attachEvent(inputs[i], "focus", onBeforeZoom); attachEvent(inputs[i], "blur", onAfterZoom); } } if (navigator.userAgent.match(/iPhone/i)) { attachEvent(window, "load", disableZoom); } // --> </script> 
1
14 июля '13 в 16:13 2013-07-14 16:13 Cavab BurninLeo tərəfindən verilir 14 İyul 2013, 16:13 2013-07-14 16:13

Xahiş edirik işə yaramaq üçün javascript və ya hacks istifadə etməyin. Bu, layihənin İnternetdə qiymətləndirilməsinə təsir edəcək.

Hiylə quracaq:

 input, input:active, input:focus, input:focus-within, input:hover, input:visited { font-size: 16px!important; } 
0
09 дек. Chocoprins tərəfindən verilmiş cavab 18 Dek 09 2018-12-09 23:13 '18 saat 11:13 'də 2018-12-09 23:13

Açısal olaraq, diqqət iOS cihazlarında artımın qarşısını almaq üçün direktivlərdən istifadə edə bilərsiniz. Mövcudluğu qorumaq üçün meta tag yoxdur.

 import { Directive, ElementRef, HostListener } from '@angular/core'; const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16; @Directive({ selector: '[noZoomiOS]' }) export class NoZoomiOSDirective { constructor(private el: ElementRef) {} @HostListener('focus') onFocus() { this.setFontSize(''); } @HostListener('mousedown') onMouseDown() { this.setFontSize('${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px'); } private setFontSize(size: string) { const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null); if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) { return; } const iOS = navigator.platform  /iPad|iPhone|iPod/.test(navigator.platform); iOS  (this.el.nativeElement.style.fontSize = size); } } 

Siz onu *.module.ts <input noZoomiOS > etdikdən sonra <input noZoomiOS > olaraq istifadə edə bilərsiniz

0
05 нояб. Cavab Adrien Castagliola tərəfindən verilir 05 Noyabr. 2018-11-05 16:47 '18 saat 16:47 'da 2018-11-05 16:47

Yazı tipinin ölçüsünü 16 pikselə çevirmək əvəzinə aşağıdakıları edə bilərsiniz:

  1. Giriş sahəsini tərtib etmək, mantıksal şriftin ölçüsünü 16 pikselə qədər təyin etməyə imkan vermək üçün nəzərdə tutulmuşdur.
  2. Giriş sahəsini istənilən ölçüyə salmaq üçün scale() CSS çevirmə və mənfi sahələri istifadə edin.

Məsələn, giriş qutunuz əvvəlcə bir stilə malikdir:

 input[type="text"] {  border-radius: 6.666666667px; font-size: 16px; line-height: 26.666666667px; padding: 6.666666667px; width: 133.333333333%;  transform: scale(0.75); transform-origin: left top;  margin-bottom: -10px; margin-right: -33.333333333%; } 

Giriş qutusuna mantıksal şrift ölçüsü 16 piksel, 12 piksellik ölçülü mətn göstərilir.

Bəzi detallara baxdığım bir blog yazısı var və HTML-yə baxmaq üçün bu nümunəyə sahibəm:
Safari-də iPhone-da zoom yoxdur, pixel mükəmməl bir yoldur

0
01 нояб. Cavab 01 noyabr tarixinə qədər Cefferyə verilir. 2018-11-01 20:35 '18 saat 20:35 'da 2018-11-01 20:35

Hollandiyanın bir universitet veb səhifəsi üçün forma idarəçiliyində avtomatik ölçeklemeyi ("formu idarə etməkdə 15px" istifadə edən) "düzəltmək" məcburiyyətində oldum. Aşağıdakı tələblər dəsti ilə gəldim:

  • istifadəçi hələ də olmalıdır
  • Şriftin ölçüsü eyni qalmalıdır
  • müvəqqəti fərqli tərzdə heç bir flaş yoxdur
  • heç bir jQuery tələbi yoxdur
  • son iOS-da işləməlidir və cihazların / cihazların digər birləşməsinə mane olmur
  • mümkün olduqda, sehrli zamanaşımları və zəruri hallarda zamanlayıcıları düzgün təmizləyin

Mən bu işə gəldim:

  // optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android) var iOS = navigator.platform  /iPad|iPhone|iPod/.test(navigator.platform) if (iOS) preventZoomOnFocus(); function preventZoomOnFocus() { document.documentElement.addEventListener("touchstart", onTouchStart); document.documentElement.addEventListener("focusin", onFocusIn); } let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"]; //let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"]; function onTouchStart(evt) { let tn = evt.target.tagName; // No need to do anything if the initial target isn't a known element // which will cause a zoom upon receiving focus if ( tn != "SELECT"  tn != "TEXTAREA"  (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1) ) return; // disable zoom setViewport("width=device-width, initial-scale=1.0, user-scalable=0"); } // NOTE: for now assuming this focusIn is caused by user interaction function onFocusIn(evt) { // reenable zoom setViewport("width=device-width, initial-scale=1.0, user-scalable=1"); } // add or update the <meta name="viewport"> element function setViewport(newvalue) { let vpnode = document.documentElement.querySelector('head meta[name="viewport"]'); if (vpnode) vpnode.setAttribute("content",newvalue); else { vpnode = document.createElement("meta"); vpnode.setAttribute("name", "viewport"); vpnode.setAttribute("content", newvalue); } } 

Bəzi qeydlər:

  • Xatırladaq ki, bu günə qədər yalnız iOS 11.3.1-də test etdim, amma tezliklə onu bir neçə digər versiyaya sərf edəcəyəm.
  • FocusIn tədbirlərindən istifadə etmək ən azı iOS 5.1 tələb edir (amma gördük ki, biz sərin bir bonus olaraq 9 ildən çox olan iOS versiyalarında işləyən saytlar)
  • Tədbir heyətini istifadə edin, çünki işləyən bir çox saytlar dinamik şəkildə forma nəzarət edə biləcək səhifələrə malikdir.
  • Bədənin mövcud olmasını gözləmək üçün html (documentElement) elementinə eventListeners parametrini təyin etmək (sənədin hazırlığı / yüklənməsi və ya DOMContentLoaded hadisə üçün gözləmə ehtiyacı barədə narahat olmaq istəməyin)
0
06 июля '18 в 19:46 2018-07-06 19:46 Cavab Mark De Jong tərəfindən iyulun 06-də saat 18: 18-də saat 19: 46-da verildi. 2018-07-06 19:46

Bunu tapmaq üçün bir müddət vaxtım oldu, amma tapdığım ən yaxşı kod burada ... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

 var $viewportMeta = $('meta[name="viewport"]'); $('input, select, textarea').bind('focus blur', function(event) { $viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1)); }); 
0
06 июня '14 в 18:10 2014-06-06 18:10 Cavab Stephen Walsh tərəfindən 06.06.2014 18:10 2014-06-06 18:10

İŞ ÇALIŞIR! MÜQƏDDƏS YÜRÜYÜ SEÇİDİR!

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

iPhone OS6 , Android 2.3.3 Emulator üzərində test edilmişdir

640 piksel sabit bir eni olan bir mobil saytım var və diqqət mərkəzində autorun qaçdım.

Çətinlikləri bölüşməyə çalışdım, amma iPhone və Android-də heç kim işləməyib!

İndi veb-sayt mobil dizayn idi, çünki ölçekleme söndürmək mənim üçün yaxşı!

Bunu tapa biləcəyim yer: çapraz tarayıcıyı dəstəkləmək üçün bir widget ölçekleme ve ölçekleme yapmak nasıl?

-8
14 мая '14 в 12:49 2014-05-14 12:49 cavab 14 may, 14 İyul tarixində saat 12:49 2014-05-14 12:49 tərəfindən verilir

Tags ilə bağlı digər suallar və ya bir sual