I'm experimenting with fullPage.js Responsive Slides Extension.
See https://alvarotrigo.com/fullPage/extensions/responsive-slides.html.
Wondering about responsive behavior on my phone: Samsung Galaxy S6.
On this phone, I don't see the site switch to its intended mobile appearance. Specifically, the horizontal rows aren't automatically switching to a completely vertical experience, and the elements aren't resizing.
I do see that site respond accurately using Developer Tools in Chrome and other browsers.
What's up do you think? Or how would you figure out what the issue is? Thanks in advance.
That's because the site is not using the viewport meta tag and therefore the pixels are not the real phone ones.
You can use the following meta tag and see how it works as expected:
<meta name="viewport" content="width=device-width,initial-scale=1">
Related
My site have a fixed viewport width set like so:
<meta name="viewport" content="width=1260px, maximum-scale=1">
This makes the site "shrink" to fit the width of the device, and works well on any browser I use on iOS or Android.
I want to know if there's any way to preview this on developer tools responsive mode in a Firefox or Safari desktop browser. I'm only able to preview this on Chrome.
In Chrome it shrinks according to the width. In Firefox/Safari it keeps 1:1 pixel ratio.
The Responsive Design Mode of the Firefox DevTools currently doesn't take the information of the <viewport> element into account.
This feature is requested in bug 774055.
I have created a parallax page.
On my desktop everything works great but if I view it on a mobile device the image is blown up so far I can literally count the pixels.
I have no idea what causes this.
Even so I have no idea how to fix this....
I don't even know where to start besides Google.
I found one topic where somebody states that this is a Safari issue.
Anyone?
I can't really create a JSFiddle or something because, like you stated, it's made in WordPress.
However please see the attached images. Maybe somebody can see at least where the problem lies and maybe tell me what causes this (global indication)
Desktop:
Mobile (iPhone)
You might want to try swapping background-size:cover to background-size:contain. This will ensure the background image fits both its width and height within the window, but could create some blank space. With 'cover', the whole area is guaranteed to be filled, but the image might not be entirely contained which seems to be what's happening now.
Have you tried to add:
<meta name="viewport" content="initial-scale=1.0">
to head of your HTML?
Or if that is not enough, try:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It tells the mobile browser to use device width and to use full initial zoom level.
I'm helping build a site for a client in Adobe CQ5. Due to the preferences of the client I cannot post the source, but we are having trouble with IE8.
When we try to view the site in IE8 the page will not render. When using the dev tools we can browse the HTML and the select tool does successfully highlight elements with the blue outline, but none of them render. The page is simply white. Things render properly in IE7 browser mode but not in IE8 or IE8 Compatibility Mode.
I've run the html through the W3 validator and nothing egregious jumped out. Anyone have any leads?
there must be some javascript error which causing this. otherwise CQ5 render well in ie8
If it works in IE7 but not IE8 you can try adding this to the <head> section
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This forces IE7 emulation. You can also try playing with the doctype to see if this makes any difference.
I have not been able to get IE mobile to stop automatically resizing my site design. I am using three stylesheets with media queries to display the site differently on different device screens. I've included the meta tag so it shows the mobile stylesheet on IE mobile but it keeps setting the viewport at 320X480 instead of using the actual size of 480X800. How can I force it to display at the actual screen size instead of scaling for a smaller resolution?
IE Mobile interprets width=device-width as width=320 (in portrait mode) and as width=480px (in landscape mode) for compatibility reasons. See http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx for full details.
As far as I can tell, the only way to force IE Mobile to display at "actual screen size" is by hardcoding the viewport value to be width=480 (portrait mode). Note that this might have unintended side effects in other browsers, or even already when you switch to landscape mode (too small/large zoom level).
Personally I always use the following:
<meta name="mobileoptimized" content="0" />
This is a very helpful page: http://msdn.microsoft.com/en-us/library/dd938878.aspx
I am developing an advertisement in my application. I showed the advertisement in the webbrowser correctly. Now when double click on the webbrowser the content is zooming, But I want to programatically zoom the content of the webbrowser. (Want to zoom the content in webbrowser when the application launches, not double clicked by the user). How can I zoom the webbrowser content programatically ?..Is it possible ?
This is not directly supported by the WebBrowser control. However, you might be able to make this work by digging around in the internals of the control. I recently published a blog post which looked at suppressing pinch and double-tap zoom interactions. This was achieved by inspecting the visual tree of the WebBrowser:
\-WebBrowser
\-Border
\-Border
\-PanZoomContainer
\-Grid
\-Border (*)
\-ContentPresenter
\-TileHost
Then handling interactions on the indicated Border (*). You might be able to find a way to emulate interactions in order to cause the browser to zoom.
If you have control over the content being loaded in WebBrowserControl, you may consider adding this meta to the source.
<meta name="viewport" content="width=480,user-scalable=no"/>
What Colin said is right, you cannot otherwise capture any manipulation events. But here on changing the margin of the webBrowser control you can see the zoom. So you need not take so much of work. So you can programmatically control the zoom to some extent. And if you need the zoom to be more specific to certain area of the web page, I suggest you to go for working on javascript. I am not sure if you can do with the sdk we have.
If you want to disable the zoom on user click what Apurv said works, but it gives a weird effect on double clicking. If you are not happy with that you will need some work arounds.