on the following webpage, all images are set to have a maximum width of 100%. This works fine on all devices except for blackberrys. Has anyone come accross this issue?
http://www.applewoodindependent.co.uk/
In Blackberry as we don't have the webview like in iOS or android.....we have the browserfield2 api.
In the browserfield2 you can scale the web page using the initiale scale method in the browser field config.
config.setProperty(BrowserFieldConfig.INITIAL_SCALE, new Float(value));
Adjust the scaling by passing the correct value in the method.
Related
I have a live site at http://www.factormedia.co.za
When you inspect it to phone scale (around 350px width or so) it loads 3 icons in the menu, of a house,laptop and notepad.
However if you had to actually use a phone the images do not appear. So trying to figure out why it is not referencing my font library from fontastic.com.
Works fine in a preview but on the actual device itself.
It seems when you embed using the link they give you works when testing and using anything from a laptop to a desktop, once you scale down it starts to give issues to mobile. To solve this issue the easiest way was to manually download the icons I was using and use them as their own custom font by installing it as the site instructs.
This then solved the problem and it now shows on smaller devices
I have an ASP.NET website running on II 7.5 that I'm trying to make mobile-friendly. For the most part it's working fine, however, I'm finding that none of my images will load when viewed with a mobile browser. When I try to view any of the images directly through the URL on a mobile browser, I get an ASP.NET "Access to the path [path] is denied", but the path it references is at a location that doesn't exist in the file system (my website's path followed by "/App_Data/Cache/...").
I've been searching online extensively and tried quite a few resolutions to no avail (such as changing image sizes, setting the max-width on the img element to 100%, setting the width and heighth of the img tag to the exact width and heighth of the image, using background-image, etc). The error that shows up in Chrome Developer Tools is just 500 Internal Server Error -- I only get the above more-detailed error when I try to access the image directly.
An example of one method I've tried in css using background-image:
background-image: url("Images/heroIpad.jpg");
The only way I've been able to get images to display on a mobile browser is by converting the image to a base64 encoded string and hence not trying to load the actual image, but I can't do that for larger background images. The images all display fine on desktop browsers.
Any help provided is much appreciated!
Try this Mobile Browsers don't display images on website. You can do CMYK to Rgb conversion here Convert images from CMYK to the RGB color space or other options thru Google.
I have a Flex Mobile application that is making use of StageWebView to load a local HTML file.
I have been debugging it on my PC using the inbuilt Emulator (simulating a Galaxy S3 screen, 1280x720, 320dpi) and on my actualy S3.
The app has the StageWebView viewPort set to a rectangle that uses the stageHeight and stageWidth. (1280x720)
On the PC, it displays the HTML file fully (the HTML file has a background image that is 1280x720) and there is no scrolling.
On my phone however, the webview shows the HTML file "zoomed" in (I say zoomed in, but you cannot in fact, zoom out!) and I has to scroll to view all the content. The content appears at twice the size (If i set the background image to 360x640, it fits on the phone screen without scrolling)
Why would the emulator, set to the same resolution and DPI, show the content differently?
More importantly, why is my phone seemingly "zooming" in on the HTML file and making me scroll? The content and phone resolution match, yet StageWebView does not seem to understand.
I found this post, click me, that seems to suggest there is a bug, however the guy mentions his issue is when he doesn't use the viewport meta tag, which I am using!
Does any one know how I can go about fixing my scaling issues and hopefully have my Flex application scale nicely over various devices and have StageWebView display my HTML file correctly?
If you're using meta viewport on android make sure to set target-densitydpi value
<meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">
Or if can using css zoom, where zoom value is related to density-independent pixels (DP) value compare to html page size
Check out this article on Adobe
I was banging my head against the wall with the same problem. On the Xoom (Android 3) the local file displayed perfectly, but on the Nexus (Android 4.2.2), the content wasn't displaying correctly with stagewebview.
My solution was to change the href of the css tag. See here:
How to reference local css files in a static webview window in android dev?.
So in my local HTML file, it changed to:
<link rel="stylesheet" href="file:///styles/style.css" type="text/css" />
For an html page, $(window).width() is giving different values when its hosted on server.
My laptop's resolution is 1920 X 1080.
When I open the page locally on Firefox and Chrome, the width is shown as 1920. The same page when I hosted on a server and when its opened, the width is shown as 1097. Why is this difference? Due to this difference the whole layout of the page is different. How I can solve this?
P.S When the page is opened in IE, the width is same on local and server.
I'm using Zurb's foundation framework (3.2).
jS not run into the server window has some property for Width like this
window.outerWidth
window.innerWidth
that change on re size browser screen with get log from window you can see all property in developer tools
console.log(window);
I had the same problem in Google Chrome. Apparently media queries get messed up if the page is zoomed in or out. Make sure your zoom level is 100% for both sites.
I confirm the issue and believe actually nothing (Ubuntu 12.04, Mozilla Firefox 26.0)
http://www.potomek.eu/blog/media/differentscreenwidthissue.jpg
This question already has an answer here:
Cocoa WebView font too small
(1 answer)
Closed 9 years ago.
I'm developing a Cocoa/Obj-C application that involves a WebView (from the WebKit framework). I've noticed that this WebView presents a slightly scaled-down version of the rendered webpage. An example screenshot:
In a browser (Safari or Firefox):
alt text http://img132.imageshack.us/img132/9824/plain.png
In my WebView:
alt text http://img21.imageshack.us/img21/6673/picture2sa.png
These happen to be local HTML/CSS files generated by the program, but if you tell the WebView to load http://www.google.com, it'll do the same thing. Both images and text seem slightly smaller. As you see, in this example, the 1px horizontal rule just disappears.
It's very important that this WebView presents an accurate picture of what the page will look like in a browser, so I would like to resolve this issue. I've looked at the WebView documentation and at all of the options in Interface Builder, but no luck.
You may want to try this method: - (void)setTextSizeMultiplier:(float)multiplier.
In Interface Builder, try changing the font size default option for the web view from 12 to 16. I believe most web browsers, including Safari, use a default font size of 16, but the default font size is set to 12 for a Cocoa web view, so everything is rendered a bit smaller.
Is it possible that one of the superviews that contains your webview is being rescaled? I don't remember seeing any automatic scaling in WebKit docs.
Here's how I made the WebView web page look the same as in Safari:
[[webView preferences] setDefaultFontSize:16];
(I did the above in applicationDidFinishLaunching handler, after setMainFrameURL call. Solution is taken from a similar question. Changing WebView font size in Interface Builder didn't work for some reason.)