While showing a webpage in the UIWebview, there are some alignment issues.
Let me show that,
Below is the screenshot of the webpage in desktop browser
Below is the screenshot for while showing that page in UIWebview in iPhone
You can see the red dots aligned differently from its original view.
I've tried the below code to fit the screen
-(void)fitthescreen
{
if ([wbvw respondsToSelector:#selector(scrollView)])
{
UIScrollView *scroll=[wbvw scrollView];
float zoom=wbvw.bounds.size.width/scroll.contentSize.width;
[scroll setZoomScale:zoom animated:YES];
}
}
But same result.
How to solve this?
Do you have the same problem using iOS Safari? This is almost certainly just an CSS problem, not a UIWebView problem.
Related
I have built a Meteor App/Website and I am trying to have a responsive fullscreen background image at the top of this page (https://www.conducate.com).
It works as expected in the Chrome Developer tools as well as in the Safari Responsive Design mode, but when I deploy the page and look at it on my mobile, it seems to zoom into the top part of the image, and does not resize it as expected from the dev-tools. As a result, there is just a grey blur to see.
Has any of you come across this problem before? It is hard to debug, since it works correctly in all the developer tools, but not at all when actually viewed on a mobile device.
Below is a link to an image with screenshots, one from my mobile (iPhone 6s, safari browser) and the other from the safari responsive design mode on my mac. Unfortunately, I am unable to post an image due to lack of reputation, so I can just post the link - I am still a newbie here...
https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png
Any help is much appreciated!
After some searching for iOS specific issues, I finally came across the solution to the problem by looking at some other examples.
It turns out, that most browsers understand the css line
.container{
background: url(http://www.link-to-image.jpg)
...
}
This is not the case for iOS, here you need to specifically state that it is an image, that is used for a background.
.container{
background-image: url(http://www.link-to-image.jpg)
...
}
I'm making a mobile website, when i display the page on my desktop an discrease the window size it works perfectly, but when I open the website on my iphone it does not display background images.
Someone can help me?
http://i305098.iris.fhict.nl/mobile/
jsfiddle.net/8r2umLkj/
Try on another mobile device. It seems to be working fine for me.
in my site I have problem in proper rendering of icons in Google Chrome as shown.
As you can see the right and bottom edge of image seems to be cut-off. But the same icons renders properly in all other browser including IE, FF, Safari.
Following is the screenshot of mozilla for the same.
Actually icons are of very big size around almost 1000 X 1000px, and I'm showing that in 100 X 100px area. The problem is I can't scale down the images and I have to use these images only.
In chrome when I zoom-in or zoom-out my website, for a moment it renders correctly but again after some time is renders as shown above.
Any possible solution to this?
Thanks for your time!!
I have resolved it myself by using image-rendering css property.
I have been stuck on this for a long time.
This page has several image icons to the left of the text content. These images get loaded perfectly fine in Chrome, Firefox, and IE9, but in IE8, they don't get loaded. IE8 is perfectly fine loading the actual image link directly, so I know it's not a fault with the image itself.
In fact, this only happens on that one page. The other pages are able to load images just fine.
Can anyone explain this huge mystery? Thanks!
the problem seems to be the css rule
.entry-content IMG
{
max-width:97.5%
}
When I remove it the images get displayed... do not know why this happens =/
edit
IE8 seems to have a problem with img tags where the width attribute and the css "max-width" attribute is set... maybe just remove on of them.
I have a "simple" web application that has a navigation and a content area.
Within the content area I have a iframe with more complex content. Unfortunately the content in the iframe has another iframe.
The get an overview look here:
.
In my scenario it is quite helpful to see the full iframe content, so we hide the navigation and change the content size on top of it:
If I go back now to initial view the iframe inside the iframe doesn't change the size:
This happend only on Safari mobile (iPad) OS 5.1. On normal Safari browser it works as expected.
Does anyone have a similar problem or an idea what is happening here?
Of course a solution would be even better :)
If this is an issue that only occurs in Safari or iPad you could add some cross-browser CSS support to tell the specific browser how it should appear. I like using this one
This allows you to add specific css instructions such as
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
.iphone.safari .scrollingframe {css style}
Hope this helps.