Distinguishing Font Sizes in Safari Compared to UIWebView

When the page is loaded in Safari, everything looks perfect. However, when viewed in a UIWebView, all the fonts appear enlarged.

I've done my research and tried various solutions like:

  • - Setting WebView.scalesPageToFit = true
  • - Applying default constraints on the webview
  • - Adding
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/>
  • - Using webkit-text-size-adjust:100%/none

I'm convinced that this issue is specific to UIWebView since the page loads fine in Safari.

This is the tutorial I followed for UIWebView: https://www.youtube.com/watch?v=rcVv1N1hReQ

Below is the code snippet I am using for UIWebView:

@IBOutlet var WebView: UIWebView!

override func viewDidLoad() {
    super.viewDidLoad()
    
    let URL = NSURL(string: "http://website")
    WebView.loadRequest(NSURLRequest(URL: URL!))
    WebView.scalesPageToFit = true
}

I've been frustrated by this issue, thank you in advance for any assistance provided.

Answer №1

If you're searching for a fix, I discovered that simply transitioning to WKWebView (without any additional adjustments) resolved this issue. Additionally, UIWebView is now deprecated, giving even more reason to make the switch.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page. Just for clarification: I have embed ...

Enhance your bootstrap accordion by incorporating stylish up and down arrows using the <accordion> element

I am currently developing a sophisticated web application using Angular and TypeScript, and I have decided to incorporate accordions in some sections. The setup for these accordions involves TypeScript/Bootstrap as shown below: <accordion> <acco ...

Managing collapsible content in Bootstrap 4: A comprehensive guide

How can I customize collapsible content in Bootstrap 4? For instance, take a look at this navbar: https://i.sstatic.net/UYbMQ.png https://i.sstatic.net/OuVdw.png https://i.sstatic.net/lXvYt.png I'm looking to modify the behavior of this example. ...

The presence of ng-show dynamically adjusts the minimum height of a div element

I am encountering an issue with a div that has the class of wrapper. Inside this div, there is a parent div with the class of content-wrapper. The wrapper div includes a conditional directive ng-show which toggles between displaying or hiding its content. ...

A solitary block positioned at the heart of a grid - jquery mobile

Using grid in jQuery Mobile, I have designed a page and now looking to place a block exactly centralized on it. In the first grid, there are 2 blocks equally positioned. In the next grid, only one block is present and I want it to be centered. JSFiddle L ...

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

Is there a way to make the drop-down from the select tag open to the right side(drop-right)? <label for="ExpLabel">Select Message Expiry:</label> <select name="ExpSelect" id="Expiry"> <option value="ExpiryDate">1 Day</opt ...

Managing stored views in Core Data: Deleting Views stored in the database

I am struggling to remove views with a yellow shadow from my main view controller. The count registers correctly but the views are not being deleted. I have tried calling setNeedsDisplay and other methods but nothing seems to work. The view only updates wh ...

Utilizing Bootstrap to create a responsive design with a full-height view on the body,

While adjusting the page width in Chrome dev tools, I noticed that the page also increases vertically. It appears that Bootstrap is assuming a viewport height larger than what it actually is. Here is the relevant code snippet: <!DOCTYPE html> <ht ...

Tips on utilizing CSS selectors with jQuery?

Is there a way to use jQuery to call a function on a web page load that will set the text "Hello world!" on all labels with the CSS class "hello"? I'm curious to learn more about how this works. Can anyone provide some insight? ...

Dragging and dropping elements onto the screen is causing them to overlap when trying

I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop s ...

Does the downloading of images get affected when the CSS file has the disabled attribute?

Is it possible to delay the download of images on a website by setting the stylesheet to 'disabled'? For example: <link id="imagesCSS" rel="stylesheet" type="text/css" href="images.css" disabled> My idea is to enable the link later to tri ...

Dynamic content alongside a stationary sidebar that adjusts in width

Attempting to create a switchable sidebar (toggling between short and long form) using bootstrap, multiple examples, and online resources. The width of the sidebar changes when toggled, and I want the content to appear next to it regardless of its length. ...

Accessing Row Data in Sqlite.swift

My query is set up like this: let query = devices.count To print out the results, I use the following code snippet: let results = try! db.prepare(query) for item in results { print (item) } The output l ...

What steps can I take to stop my Details element from moving a nearby Div?

Within this setup, there is a div containing Details and Summaries to the left. Upon expanding the details, the text enlarges and the container moves, causing the image in the right div to shift downward. Is there a way to prevent this from happening? I ...

Creating a CSS animation to mimic the fading in and out effect of the Mac scrollbar when scrolling begins

My journey begins with this: *::-webkit-scrollbar { } *::-webkit-scrollbar-button { } *::-webkit-scrollbar-track { } *::-webkit-scrollbar-track-piece { } *::-webkit-scrollbar-thumb:active { width: 6px; background-color: red; } *::-webkit-scr ...

Integration of Facebook into an iOS application: Backup plan for iOS 5.0

My iOS app has native Facebook integration that works well, but it's only compatible with iOS 6.0 and above. I need to make sure the app doesn't crash on older versions of iOS like 5.0. Currently, when I build the app for iOS 5.0, I'm encoun ...

What is the best way to include a secondary border to a responsive textarea?

Currently, I am utilizing Twitter Bootstrap 3.2.0 and below is the code snippet: Click here for jsFiddle .textarea textarea { background-color: white; background-image: url("http://ello.96.lt/images/as.jpg"); line-height: 1.56em; p ...

Ways to exclusively trigger the onclick function of the primary button when dealing with nested buttons in React.js

Let me elaborate on this issue. I have a List component from material-UI, with ListItem set to button=true which makes the entire item act as a button. Within the ListItem, I have added a FontAwesomeIcon. To hide the button, I set its style to visibility: ...

Utilizing MUI for layering components vertically: A step-by-step guide

I am looking for a way to style a div differently on Desktop and Mobile devices: ------------------------------------------------------------------ | (icon) | (content) |(button here)| ----------------------------------------- ...

What is the best way to ensure that my mobile website with fixed-width always appears fully zoomed in?

How can I ensure that my fixed width website always appears fully zoomed in on Webkit browsers such as iPhone and Android? Currently, the site looks good on an iPhone but appears too small or zoomed out on higher resolution Android phones. I have tried u ...