The embedded page has bellow "viewport":
<meta name="viewport" content="width=640, initial-scale=0.45, minimum-scale=0.45, maximum-scale=0.45, user-scalable=no, target-densitydpi=high-dpi">
It's responsive when I open this page in device's browser(iPhone5). But when I embed it inside an iframe it's not responsive.
How can I make my frame responsive for this page?
Related
I want to shrink the entire view when resizing the window. In mobile view, the view should be a shrunken version of the desktop view. Something similar to the https://www.cbioportal.org/ website. If we resize, the entire view is being shrunken. In the frontend i'm using Angular and bulma. How could I achieve this?
Don't use the "responsive" meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
This will revert to default behavior of browser which shows the entire viewport width.
The website I'm having problems with is "kayparkmemorials.com". If you view it on your laptop/desktop, and you scale the website down to your smallest possible scalable window, it appears to function as expected responsively. For some reason, when I view the site on my mobile phone, it displays the view as if it's in tablet view.
I have the max-width for mobile view set as: #media screen and (max-width: 815px)
Anyone had any previous issues similar to this and have some tips? Another important thing I should add is that when testing the site on Dreamweaver by scanning the barcode to get the preview on my mobile, it previewed as expected. I didn't change anything to the coding after that point and as soon as it is officially on the web (1&1 HOSTING), the responsiveness on mobile isn't doing what it should.
You need to add a viewport meta tag to the head of your page, if you don't do this the default behaviour for smart phone browsers is to scale your desktop page.
What you want is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Good luck!
I have this site and this.
I didn't add yet to them media queries (maybe in some weeks..) , but if you load the first one on a mobile phone, you will see the entire site, but if you load the second one, you will see just a part..in this latter case, how can I do to see the entire site in a mobile phone as he fist one site?
You have a viewport meta tag there:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
While it's good for responsive websites, right now you might be better off without it.
For my website I have been trying to centralize the entire content for display on mobile devices:
http://m.bachatdeals.com
As soon as I open the website on a mobile device, it has lots of space below the content and I have to pinch zoon to be able to read, how do I remove the extra space below so that my content perfectly fits in the center of the mobile device?
I have tried quiet a few CSS workarounds, but something or the other breaks my layout , please help !
Note : right now its not automatically redirecting to mobile devices so you would have to manually type in the url.
Try adding this to the head of your mobile pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'm building web application using RWD. I've written media queries for different resolutions say 1024, 768 and 320.
I'm using below metatag to decide page width
<meta name="viewport" content="width=device-width, initial-scale=1" />
There are few devices e.g. iPhone 5 with resolution - 1136×640. When I'm opening my webpage in iPhone its displaying 320 layout in landscape mode where as its resolution says its 1136px wide.
I know it has CSS pixel ratio as 2 but not sure logic between CSS pixel ratio, media query width and device resolution calculation.
Is there are any article or link that explains this and will tell why its displaying 320 layout for iPhone.
Thanks in advanced.
Try using this meta declaration instead:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">