I'm working on a responsive design using Google Apps Scripting and have run into some issues. All site contents are piped through an iFrame sandbox that prevents me from setting up a meta viewport. This means that no matter what device I view the application on, it's treated as a desktop application.
For example, viewing the web app on a Galaxy S4 shows the full 1080x1920 view.
Google creates the sandbox iframe and sets it to the resolution of the device. They don't let you create a meta element and creating it via JavaScript won't do you any good as you can't modify contents outside of the sandbox. Once the page has loaded, you can scale the window and the elements will resize as expected, but this does me no good on a mobile device.
The best I can come up with is to retrieve navigator.userAgent after the page has loaded and then modify each element after the fact. Far from ideal.
So, is there a way to trick Bootstrap into rendering mobile or am I stuck writing media queries and custom CSS?
I had a similar problem (within a modal, not iframe) so created a pretty lengthy but basic css page to solve it:
https://github.com/shawntaylor/bootstrap-force-device
Once you add that css file to your project, you call force-xs (or force-sm, force-md or force-lg) on a parent div of the content you want to force. Then the CSS forces the inner content to behave like it's on an xs device.
<span class="force-sm">
<div class="col-sm-6 col-md-4">
<h1>I want to make this behave like it's on an sm device</h1>
<h2>Even when it's on a desktop</h2>
<p>Or within a window that thinks it's a desktop</p>
</div>
</span>
I don't have the link handy, but I literally just read about this:
You can download a version of Bootstrap CSS that only includes the mobile media queries, and delete the media query so that the mobile CSS loads on all devices.
Related
On my HTML/PHP page, I first have the Mobile HTML Block, which is hidden on desktop resolutions, and then the Desktop HTML block, which is hidden on the opposite mobile resolution:
<div class="mobile-version">
<img src="/images/300.jpg">
</div>
<div class="desktop-version">
<img src="/images/90.jpg">
</div>
I'm trying to improve my Google Page speed score, so I don't want to load the 90.jpg if the user is on Mobile screen width.
However, if I just use style="display:none", I can see in chrome dev. tools that the image is still being loaded by browser.
How to handle this?
The dom is interpreted before the application of any css. At this stage, I see two solutions :
Lazy loading : this will require javascript; you can inject src tags only on the elements that are not effictively hidden.
Html 5 picture element : this HTML5 element contains the and the tag. The advantage is that you can apply a media filter in the source element, so only loaded on desktop devices. The only thing that will be always loaded is the fallback img src, but this is less problematic.
I'm using bootstrap grids for my layout. When I make the width of my browser smaller the grid elements rearrange to accommodate. However if I view the site on my phone, or set the browser view mode to mobile device in developer options on chrome, the grid elements don't move, everything stays put but reduces in size, so I end up with a really tiny version of my site.
for my grids im using:
<div class='row'>
<div class='col-md'>content</div>
<div class='col-md'>content</div>
</div>
Am I using the -md part incorrectly. I like the the point at which it breaks on the browser but does this affect mobile as well?
edit: Just to add some peculiarities about my site.
It's hosted on Github, ie. MyName.github.io
Issue only occurs with the online version, offline the grids rearrange fine.
Im using a domain to forward to my github address, ie. Myname.com -> myname.github.io
Just incase this can affect anything
That sounds as if you didn't insert the viewport tag, so mobile devices will zoom your website to fit into the screen as is. Put this into the headsection of your html code:
<meta name="viewport" content="width=device-width initial-scale=1.0" />
Found the issue.
I am using a forward on my domain with masking to another address. This displays the site in an iframe in the original domain domain.
If i visit the domain i'm directing to directly, everything works dandy.
I'm creating a (react) component library for documentation and testing purposes for our company. A kind of style guide. Some of our components have styles that depend on media queries to scale up and down nicely.
Our style guide site is responsive but I would like to be able to render different screen sizes. As an example, I wanted to show how the site header looks like in desktop and mobile without having to resize the window, as if they were multiple iframes with different zoom levels.
So I was thinking if it was somehow possible to make html elements think they are being rendered in a larger or smaller screen by changing their zoom level. A sort of scaling, while staying within the same limits.
In google chrome there is a tool who do this.
Right Click > Inspect the element > The mobile icon at the top corner right
Check my screenshot below.
Cheers mate ;)
I am trying to make a webpage with HTML,css and jquery. But the problem is that the webpage is not working properly on phone or other small screen devices. Here is the link for the page.
The solution is quite simple. To have responsive layouts, use percentages for width/height and margins rather than pixels (px) so that they can auto-resize when the screen size changes. To make your bottom bike image look responsive, use width: 95% and height: 95% (or whatever other percentage you'd like). For the Bikerz icon, try using margin: Google Chrome's inspect feature is very useful so make sure to test it out on it. Simply right click on the web page and click Inspect. Once you are there you will see an icon left of the "Elements" section. When you click that, you can view your web page layout under different resolutions.
Either you have to write custom css to support mobile device or I will recommend to use Bootstrap framework in order make compatible your site on mobile. Bootstrap will allow you to developing responsive, mobile first projects on the web.
If you are going to use css then, i will also recommend you to validate your css support at different browser and mobile platform through canIuse.
I have the following jsfiddle http://jsfiddle.net/KfPOQ/
using a web browser it is fine however when on the ebay app on iphone or ipad i have to scroll right to see the full page how do I eliminate this issue?
You need to have the content of the page fit within your viewport (or screen) dimensions for the given media type. You can have different stylesheets based on the media type in a link/stylesheet tag. Say, for the iphone, use media="handheld" and try to keep the content within around 600px, or whatever looks good on your mobile device.
Here is another resource from w3c.