يقوم UIWebView بتغيير حجم النص بعد التدوير:أبحث عن تفسير لخلل سحري أو غبائي

Question

لذلك لدي UIWebView في تطبيقي وقمت بتحميل بعض html (المقالات) إليه، ووضع بعض CSS لجعل كل شيء أجمل.هذا بسيط وواضح وكل شيء مثالي حتى أحاول إضافة القراءة في وظيفة أفقية ثم لاحظت أن UIWebView يتجاهل أي "حجم خط" لـ css قمت بوضعه في HTML ويزيد حجم الخط بشكل كبير بعد التدوير إلى الوضع الأفقي.

لقد أمضيت حوالي 4-5 ساعات (أنا جديد في برمجة تطبيقات iPhone، لكنني عنيد جدًا عندما يتعلق الأمر بعمل شيء صحيح) أحاول إصلاحه.لقد جربت الكثير والكثير من خيارات التكوين - لا شيء.

والليلة حدث شيء سحري.مجرد إلقاء نظرة على المصدر:

المناظر الطبيعية مع الخطأ:

r = CGRectMake(0.0, 0.0, 480.0, 320.0);
[adView.view removeFromSuperview];
if (!isFullScreen) {
    minus = 50 + minus;
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];        
} else {
    minus = 20; 
}

[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

تم إصلاح الوضع الأفقي (حجم الخط لم يعد يتغير):

r = CGRectMake(0.0, 0.0, 480.0, 320.0);
[adView.view removeFromSuperview];
if (!isFullScreen) {
    minus = 50 + minus;
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];        
} else {
    minus = 20; 
}
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

if (!isFullScreen) {
    minus = 1 + minus;
} else {
    minus = 20+1;   
}
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

كما ترون، قمت فقط بإضافة نفس الرمز مرة أخرى وزادت الهامش (ناقصًا) بنقطة واحدة.وقمت بعمل setFrame مرة أخرى (لا، فهو لا يصلح تغيير الحجم باستخدام مجموعة واحدة فقط من setFrames).

أنا سعيد لأنه يعمل، ولكن أود أن أعرف كيف ولماذا، حتى أتمكن من القيام بذلك "بالطريقة الصحيحة"، لأن الكود الآن يبدو غبيًا وله هامش مرتفع يبلغ نقطة واحدة في الجزء السفلي من التطبيق.

ولا تسأل لماذا حاولت نسخ ولصق نفس الرمز مرة أخرى ..

Answer 1

وكان الحل السحري :

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>

لو كنت أعرف فقط منذ هذا الأسبوع..لقد ضاع الكثير من الوقت، وضاعت الكثير من الأعصاب..

Answer 2

ال دليل محتوى ويب سفاري يذكر أيضًا كيفية تعطيل التحجيم التلقائي للنص في CSS، مما أدى إلى حل المشكلة في حالتي.

html {
    -webkit-text-size-adjust: none; /* Never autoresize text */
}

Answer 3

باستخدام الإجابتين الأوليين، خاصية CSS:

html {
    -webkit-text-size-adjust: none; /* Never autoresize text */
}

والعلامة الوصفية:

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>

لقد تمكنت من إدخال كليهما في موقع ويب موجود، باستخدام كود جافا سكريبت هذا:

var style = document.createElement(\"style\"); 
document.head.appendChild(style); 
style.innerHTML = "html{-webkit-text-size-adjust: none;}";
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

باستخدام webViewDidFinishLoad من UIWebViewDelegate:

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    NSString *javascript = @"var style = document.createElement(\"style\"); document.head.appendChild(style); style.innerHTML = \"html{-webkit-text-size-adjust: none;}\";var viewPortTag=document.createElement('meta');viewPortTag.id=\"viewport\";viewPortTag.name = \"viewport\";viewPortTag.content = \"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\";document.getElementsByTagName('head')[0].appendChild(viewPortTag);";
    [webView stringByEvaluatingJavaScriptFromString:javascript];

}

Answer 4

ربما تحتاج فقط إلى قراءة هذا

https://developer.apple.com/library/content/documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

يوضح الشكل 3-15 تقديم نفس صفحة الويب عندما يتم تعيين عرض إطارات العرض على 320.لاحظ أن اتجاه الصورة يتم تقديمه كما هو الحال في الشكل 3-14 ، لكن اتجاه المناظر الطبيعية يحافظ على عرض 320 بكسل ، وهو ما يغير المقياس الأولي وله تأثير التكبير عندما يتغير المستخدم إلى اتجاه المناظر الطبيعية.

Answer 5

لقد حاولت قضيتك ولكن لم يحالفني الحظ.

الحل الذي نجح بالنسبة لي هو:

[إعادة تحميل عرض الويب]؛

Answer 6

لدي طريقة أخرى لحلها عن طريق إضافة العنصر:

<table>
<tr>
<td>
  [your html content]
</td>
</tr>
</table>