Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá gostaria de saber qual código devo usar para quando o cliente acessar meu site por um mobile automaticamente rotacionar a tela.
/applications/core/interface/imageproxy/imageproxy.php?img=http://i63.tinypic.com/fx9s9t.png&key=fafb56e498c7d3169a9ddd0f7eadb2e401cff856ab66ce5a951526f7fd588f8b" alt="fx9s9t.png" />
Indicar onde aplicar o código, exemplo header, index, etc
Meu site: www.xjoias.com.br
>
Bem, fazer um site não responsivo para modo retrato é meio esquisito até pra W3C... Mas vamos lá.
Você pode fazer isso com o media query do CSS e usar um método rotate pra página. Exemplo:
@media only screen and (min-width: 360px) and (max-width: 1024px) and (orientation-portrait){
body{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
}Você também pode chegar no mesmo resultado com JavaScript juntamente com CSS, creio que ficaria até mais fácil de entender. Exemplo:
JS
(function () {
modoRetrato();
$(window).resize(function () {
modoRetrato("#ID_body");
});
function modoRetrato(body){
if ( screen.width < screen.height ){
$(body).addClass("modo-retrato");
} else {
$(body).removeClass("modo-retrato");
}
}
})();CSS
.modo-retrato{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}É isso, espero que tenha entendido.
Amigo, tentei em diversos locais colocar os código mas não consegui, teria como instruir onde inserir eles ?
Sou leigo ainda em desenvolvimento!
Foto do meu manager:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/6yMUBEQ.png&key=348c0eeb18b1087d45146514875340c6a98cb421bc30c2e52650bff6f8985d9a" alt="6yMUBEQ.png" />
Para o código CSS:
wp-content > themes > nome do seu tema > style.css
Para o código JavaScript:
wp-content > themes > nome do seu tema > footer.php
Claro que pra deixar tudo isso mais organizado, você pode colocar os arquivos dentro das pastas respectivas (pasta CSS e pasta JS), e depois chamar no header.php o CSS e no footer.php chamar o JS.
Exemplos:
Header.php
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/seunovoestilo.css">Footer.php
<script src="<?php echo get_template_directory_uri(); ?>/js/novo_javascript.js"></script>>
Para o código CSS:
wp-content > themes > nome do seu tema > style.css
Para o código JavaScript:
wp-content > themes > nome do seu tema > footer.php
Claro que pra deixar tudo isso mais organizado, você pode colocar os arquivos dentro das pastas respectivas (pasta CSS e pasta JS), e depois chamar no header.php o CSS e no footer.php chamar o JS.
Exemplos:
Header.php
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/seunovoestilo.css">Footer.php
<script src="<?php echo get_template_directory_uri(); ?>/js/novo_javascript.js"></script>Amigo, eu tentei fazer como disse na primeira parte, porém deu erro e não rotacionou a tela em mobile. Há grande possibilidade de ter sido inserido em local errado o código. Segue abaixo o código inteiro dos arquivos onde você instruiu para inserir, desde já agradeço sua gentileza, paciência e sabedoria ;)
footer.php
>
<?php
/**
* Footer Template
*
* Here we setup all logic and XHTML that is required for the footer section of all screens.
*
* @package WooFramework
* @subpackage Template
*/
global $woo_options;
$total = 4;$total = $woo_options['woo_footer_sidebars'];
}if ( ( woo_active_sidebar( 'footer-1' ) ||
woo_active_sidebar( 'footer-2' ) ||
woo_active_sidebar( 'footer-3' ) ||
woo_active_sidebar( 'footer-4' ) ) && $total > 0 ) {
?>
<?php woo_footer_before(); ?>
<section id="footer-widgets" class="col-full col-<?php echo $total; ?> fix">
<?php $i = 0; while ( $i < $total ) { $i++; ?>
<?php if ( woo_active_sidebar( 'footer-' . $i ) ) { ?>
<div class="block footer-widget-<?php echo $i; ?>">
<?php woo_sidebar( 'footer-' . $i ); ?>
</div>
<?php } ?>
<?php } // End WHILE Loop ?>
</section><!-- /#footer-widgets -->
<?php } // End IF Statement ?>
<footer id="footer" class="col-full">
<div id="copyright" class="col-left">
<?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_left_text'] );
} else { ?>
<p><?php bloginfo(); ?> © <?php echo date( 'Y' ); ?>. <?php _e( 'All Rights Reserved.', 'woothemes' ); ?></p>
<?php } ?>
</div>
<div id="credit" class="col-right">
<?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_right_text'] );
} else { ?>
<p><?php _e( 'Powered by', 'woothemes' ); ?> <a href="[http://www.wordpress.org](http://www.wordpress.org)">WordPress</a>. <?php _e( 'Designed by', 'woothemes' ); ?> <a href="<?php echo ( isset( $woo_options['woo_footer_aff_link'] ) && ! empty( $woo_options['woo_footer_aff_link'] ) ? esc_url( $woo_options['woo_footer_aff_link'] ) : 'http://www.woothemes.com' ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/woothemes.png" width="74" height="19" alt="Woo Themes" /></a></p>
<?php } ?>
</div>
</footer><!-- /#footer -->
</div><!-- /#wrapper -->
</body>
</html>style.css
Adicionei para download pois contém 3740 linhas, iria poluir o post.
http://www.4shared.com/document/rDLE4_1Kce/style.html
SCAN:
(ARQUIVO)
(LINK)
Obrigado, aguardo resposta, se possível me envie uma mensagem privada com seu facebook, seria mais fácil de resolver!
Bem, fazer um site não responsivo para modo retrato é meio esquisito até pra W3C... Mas vamos lá.
Você pode fazer isso com o media query do CSS e usar um método rotate pra página. Exemplo:
@media only screen and (min-width: 360px) and (max-width: 1024px) and (orientation-portrait){
body{
Você também pode chegar no mesmo resultado com JavaScript juntamente com CSS, creio que ficaria até mais fácil de entender. Exemplo:
JS
CSS
É isso, espero que tenha entendido.